こんにちは、ゆんつです。
ブログにプログラミングやブログのカスタマイズのソースコードを記載したい場合には、シンタックスハイライトという機能を使うと文章部分とソースコードの区別がつきやすくて、とても見やすくなります。
<h2>こんにちは<h2>
でも、シンタックスハイライトはあくまでもソースコードを綺麗に表示してくれるだけで実行結果までは表示してくれません。
つまり「このコードを実行するとこうなりますよ」というところまでをワンセットで表現するには別の方法が必要となります。
「WordPressのブログにソースコードを記載し、なおかつそのソースコードを実行した結果まで表示したい！」
そんな場合に便利なのが「CodePen」というサービスと、WordPressのプラグイン「CodePen Embedded Pens Shortcode」の組み合わせです。
この組み合わせによりソースコードと実行結果を一緒に表示することが出来ます。
今日はWordPressでの「CodePen（無料版）」の登録から利用について書きたいと思います。
CodePenとは？
HTML、JavaScript、CSSの3つの言語について、ソースコードだけでなく実行結果も表示することができるサービスです。
有料版と無料版があり、当然有料版の方が高機能ですが、ソースコードと実行結果を表示したいくらいなら無料版で十分です。
WordPressで利用する場合は「CodePen Embedded Pens Shortcode」と一緒に使います。
導入手順
1. Wordpressにプラグインを導入する
まずCodePenで作成したコードをWordPressに埋め込むために必要なプラグイン「CodePen Embedded Pens Shortcode」をインストールします。
ダウンロードして有効化するだけで良く、何も設定することはありません。
これでWordpress側での設定は完了です。
2. CodePenに登録する
CodePenの公式ページに行きます。
トップページに「Sign Up」というボタンがあるのでクリック。
するとプランの選択画面になるので「FREE」をクリックします。
続いて登録画面に進みます。
twitterやfacebookのアカウントで登録できるみたいですが、今回はメールアドレスで登録するので一番下の「Sign Up with Email」ボタンをクリック。
入力フォームが現れるので、必要な事項を入力していきます。
「YOUR NAME」というのが自分のプロフィールの名前になります。
「CHOOSE A USERNAME」に設定したものはマイページのurlになります。
僕は「yuntu」とつけたので、僕のページのurlは
https://codepen.io/yuntu/
です。
またログイン時にはUSERNAMEかメールアドレスのどちらか一方とパスワードを求められますので、その際にもUSERNAMEを使用することがあります。
Emailには使用しているメールアドレスを入力し、Password欄にはログインに必要になるパスワードを入力します。
全ての項目を入力し終わったら「Submit」ボタンをクリックしましょう。
すると「Thanks for signing up,〇〇（YOUR NAMEで設定した名前）」という画面になります。
特に何も記入する必要はないので、そのまま下部の「Save&Continue」をクリック。
これで登録は完了です。
使ってみよう
登録が完了したらエディター画面になっているので、さっそく使ってみましょう。
ちなみに、トップページからログインしてエディター画面を出す場合は、ログイン状態でCodePenの画面の左上にある「Create」ボタンをクリックして出てきたメニューから「Pen」という項目をクリックすればOKです。
エディター画面ではHTML、CSS、JavaScriptと言語ごとに分割された画面が出てきます。
使用する言語と一致するエディタ画面にソースコードを書き込んでいきます。
するとすぐに下の画面にソースコードの結果が表示されます。
ソースコードが完成したらエディターの上の方にあるSaveボタンをクリック。
すると画面の右下に「Embed」というボタンが現れます。
「Embed」ボタンをクリックするとWordPressに貼り付けた時のプレビューが確認できます。
上にあるHTMLやCSSのボタンをクリックすると、どちらを優先的に表示するかを決めることが出来ます。
HTMLボタンをクリックすると初期状態ではHTMLのほうが優先的に表示されますし、CSSボタンをクリックすると初期状態ではCSSが優先的に表示されます。
Resultのボタンをクリックすると初期状態で実行結果を表示するかしないかを選択することが出来ます。
エディター画面の大きさ調整などもここで行います。
ブログでの表示方法の設定をした後に、「WordPress Shortcode」タブをクリックするとするとワードプレスに貼り付けるショートコードが表示されます。
このショートコードをコピーしてWordPressのテキストエディター画面で貼り付けるだけです。
するとこんな感じで表示されます。
See the Pen YBegZB by konpure (@yuntu) on CodePen.0
ソースコードの隣に実行結果が表示されて、とてもわかりやすいです。
このように、ソースコードだけではなくて、その結果もすぐ近くに表示させたい場合。
「CodePen」とWordPressプラグイン「CodePen Embedded Pens Shortcode」の組み合わせを使うことで手軽にそれを実現することが出来ます。
それでは、またー。
コメント