wildhawk
CodePenを使ってソースコードを表示させよう
これ、憧れてたやつ
前回「WordPressの記事内でソースコードを見やすく表示させるプラグイン」で「Highlighting Code Block」を紹介しましたが、残念ですが私のサイトではプラグインでは利用できない環境でした。
そこで今回は、プラグイン以外の方法を探したところ、サイト内でHTMLやプログラムのコードを表示する際に、ソースと表示結果が同時に確認できるサービス「CodePen」を見つけたので、早速試してみました。
こんな人にオススメ
サイトで記事や固定ページでソースコードを見やすく表示したい
サイトで表示結果を見ながらソースコードを確認したい
WordPressでプラグインを使わずソースコードを綺麗に表示させたい
WordPressでプラグインを使わず（私は使えなかった）
綺麗にソースコードを表示させるなら、是非参考にしてください。
「CodePen（コードペン）」は、HTML、CSS、JavaScriptをブラウザ上で手軽に書いて、その場で実行しプレビューで表示結果を確認できるオンラインの開発環境（オンラインコードエディタ／プレイグラウンド）です。
HTML、CSS、JavaScriptで開発する場合、ファイルに書いて、ファイルをFTPでアップし、ブラウザで表示を確認する作業を、ブラウザ上の小窓で一括作業できるブラウザ上のサービスで、非常に便利なサービスです。
今回は開発したコードやプレビューを、WordPressのサイトに貼り付ける事ができるので、その方法をご紹介します。
CodePen
「CodePen」は以下の様な用途で利用できます。
- フロントエンドの試作・デザイン確認
- コーディングの学習や練習
- 面接やポートフォリオのコード共有
- Web技術のプレゼンやチュートリアル
「CodePen」は、以下の様な機能があります。
- 基本無料：ユーザー登録が必要ですが、基本無料で利用可能
- リアルタイムプレビュー：コードを書いたその場で結果を即座に確認できる
- ブラウザベース：ソフトのインストール不要。Webブラウザだけで利用可能
- 共有が簡単：作った作品（「ペン」と呼ばれる）を他のサイトに埋め込める
- テンプレートやフォーク機能：他人のコードをベースにして自分の作品を作れる
- フロントエンドに特化：HTML、CSS、JavaScriptに特化しており、Web制作の試作・デモに最適
- コミュニティ機能：他人の作品を閲覧・いいね・コメントできる
「CodePen」の利用にはユーザー登録が必要です。
有料（PRO）なら、共同開発に便利な機能がありますが、今回はコードをWordPressサイトに表示させるのが目的なので、無料の機能だけで試してみたいと思います。
① CodePenのサイトにアクセスします。
https://codepen.io
②画面右上の「Sign Up」をクリックしてください。
③画面の指示に従ってユーザー登録してください。
※私はGoogleアカウントに紐付けました。
ソースコードを開発するだけなら、左カラムの「Start Cording」からコーディングの利用が可能ですが、今回はサイトにソースコードを貼り付ける事が目的なので、保存機能が使える無料のユーザー登録をしました。
無料のユーザー登録が完了したら「CodePen」を具体的に使ってみましょう。
下図はユーザー登録の完了後に表示された画面です。
通常は、左メニューから「CREATE」→「Pen」をクリックして入力画面を表示させてください。
画面上部に「HTML」「CSS」「JS（JavaScript）」の入力欄があり、画面下部にプレビューがリアルタイムに表示されます。
HTMLはお約束のDOCTYPEタグから記述する必要はなく、bodyタグの中に直接記述する感じで問題ありません。もちろんCSSやJS（JavaScript）の読み込みを記述する必要もありません。
画面左上の「Untitled」のペンをクリックし保存名を記入し、画面右上の「Save」ボタンを押すと保存できます。
WordPressのサイトに埋め込むコードを取得します。
画面右下の「Embed」をクリックします。
表示された画面の右下にある「 Copy Code」をクリックし、貼り付けるコードを読み込みます。
コピーした埋め込みコードを、HTMLに貼り付けると、以下の様に表示する事が可能となります。
See the Pen Hello World! by 山内孝幸 (@hezfscev-the-looper) on CodePen.
今回は、HTML・CSS・JavaScriptを開発する「CodePen」を使い、ソースコードをサイトに綺麗に貼り付ける方法をためしました。
前回失敗したプラグインで実現する方法と比較すると、
・ユーザー登録が必要
・コードを「CodePen」に保存する必要がある
・サイトに貼り付けるコードを見ても内容がわからない
・iframeで表示させるので、セキュリティ的に心配
などのデメリットがあると思います。
ただ、このサイトは「Customizr」と言うテーマを使い、テーマ専用のエディタ「Nimble Page Builder」で作業しているため、プラグインだと動作しないため、今回の方法で実現しました。
WordPressのプラグインは、相性などで使えない事があるので、その場合に代替案がだせるかが、クリエイターとしての力量だと思います。とはいえ、こんな修羅場ばかり対応しているので、ちょっとうんざりしてます。。。
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください