CodePenのソースコードをWordPressに貼り付けて紹介してみよう

ソースコード共有Webサービスは、「JSFIDDLE」を使っていましたが、最近「CodePen」を貼り付けてソースコードを紹介しているサイトや、「『CodePen』にはクールなソースが転がっている」と見るようになったので、引っ越ししてみました。

実際に貼り付け作業をしたときに、なかなか苦戦したので、改めて、おさらい的メモをしていこうかと思います。

CodePenの貼り付けは、「WordPressのプラグイン」と「CodePen公式サイトから取得できるショートコード」を使って貼り付けます。

ということで今回はWordPressのプラグイン「CodePen Embedded Pens Shortcode」を使った、CodePenのソースコードを貼り付ける方法を説明していきます。
あっ、バージョンによって異なる場合があるので、ご注意とご了承のほどを。

このページの目次

まずはプラグインのインストール

WordPressプラグインの基本的なインストール操作は割愛・・・かいつまんでサラサラと行きます。

新規追加で、検索する場合は「CodePen Embedded Pens Shortcode」で検索しましょう。

ダウンロードしてWordPressにインストールする場合は
「WordPress › CodePen Embedded Pens Shortcode « WordPress Plugins」
よりダウンロードして、インストールしてください。

インストールが完了したら設定ですね。
ですが、特に設定する必要はありません。
初期設定の空欄、もしくは、0で問題ないです。

ここでの設定は、有料機能の1つ、貼り付けるときのテーマ設定で複数のテーマを持っているときに必要になってくる設定だと思われます。

ただ貼り付けるだけならば、これで設定は完了です。

まず、貼り付けたいソースコードを選びます。

選んだソースコードの画面が開いたら、ブラウザの下の方に【Embed This Pen】というボタンがあるのでクリックします。
小さめで分かりづらいです。

【Embed This Pen】ボタンをクリックすると、実際に貼り付けるソースコードのカスタマイズ画面が表示されます。

単純に、貼り付ける作業だけでしたら、CodePenのアカウントの取得や有料メンバーにならなくても貼り付けることができます。

右上の方にショートコードが表示されます。
っと、その前にショートコードのそばにある【WordPress Shortcode】が選択されているか？の確認を忘れずにしましょう。

ちなみに、【HTML】が選択されていると、ソースコードへのテキストリンクを貼り付けることになります。
テキストリンクになるので、もちろん、WordPress以外のサイトでも貼り付けることができます。

あとは、取得したショートコードをコピペすればOKです。

貼り付けるソースコードのカスタマイズ画面では、線やリンクの色など変更したり、初期表示でHTMLやCSS、実行画面など、どれを表示するか選ぶことができます。

「テーマを設定する」ということになるのですが、このテーマを設定したときに、テーマをセーブしなければ有効になりません。

※主要的なものを、ざっと。
「Default Tab」・・・初期表示はCSSか、HTMLか、実行(Result)画面か　など
「Border」・・・外枠を表示するか、細い線か、太い線か
「色の部分」・・・各種カラーの選択
「Save Theme」・・・テーマを設定・セーブ

テーマ設定を有効にするには、CodePenのアカウントを持っていないとセーブできませんし、有効にすることができません。

アカウントさえ持っていれば、テーマは1つ（Defaultテーマ）ですが、自分の好きな色などを設定して貼り付けることができます。

また、有料メンバーは、複数のテーマを設定して管理することができるようです。

カスタマイズ画面で設定を変更すると、過去にWordPressに貼り付けたCodePenの全てに適用されます。
ブログにあった色を選択して、かっこよく貼り付けちゃってください。

今回はWordPressユーザー限定の記事になってしまいました。

WordPress以外のサイトでは、テキストリンクを貼り付けるしかないようです？
もしかしたら、他に方法があるのかもしれません。

そういった点では、WordPress以外のブログをやっている人で、ソースコードを貼り付けて紹介したい人は、「CodePen」よりも「JSFIDDLE」を使った方がいいのかもしれませんね。