ようこそのお運びで厚く御礼申し上げます。
さてさて、今回は前回の続きでGistについてもう少し書いてみます。
といっても多分、WordPressメインで書いてしまうのであまりGistとは関係ないかもしれませんが、お付き合いよろしくお願いします。
今回の目次
- WordPressでGistを使うには？
- Gistで作ったソースコードのシリアルNoとは
- WordPressのプラグインがあるかな？
- プラグインEmbed GitHub Gistを使ってみる
- ちょっとした問題点。
- プラグインを使わず、function.phpにコードを書いてにショートコードを使ってみよう。
今回は作っちゃいます。
ではさっそくやってみましょう。
WordPressでGistを使うには
ソースコードは前回の記事から同じものを使います。まずは基本から。
<script src="https://gist.github.com/snoise/6156114.js"></script>
WordPressの場合だと、上記のコードを「ビジュアル/テキスト」入力画面の「テキスト」を選択して貼付けます。が・・・しかし、「ビジュアル/テキスト」を切り替えると、上記のスクリプト内に勝手に変なコードが挿入され表示されなかったり、切り替えが面倒で手間でわかりにくい、ということが発生してしまいます。
Gistで作ったソースコードのシリアル番号とは
Gistで作った各々のソースコードにはシリアル番号が割り当てられています。スクリプト内のファイル名
src="https://gist.github.com/snoise/6156114.js"
の「6156114」という部分がシリアル番号になるので、こちらを使ってプラグイン等を模索していきます。
WordPressのGistのプラグインはあるかな？
まぁ、ないはずがないんですけどね（笑）。たくさんプラグインがあるみたいなので、とりあえず有名所を使ってみます。
こちらのプラグインをWordpressにインストールします（インストールの仕方は省略）。
プラグインEmbed GitHub Gistを使ってみる
※Embed GitHub Gist(Version 0.13)について簡単な使い方を書いてみます。
挿入するショートコードには何種類かあるみたいですが、
[gist id=6156114]
が最も簡単っぽいショートコードです。「6156114」の所にはシリアル番号を入れて記事本文にそのまま記入します。
そうすると、簡単に挿入することができました。
※表示例がないのは、このページでちょっと問題が発生→次へ
※その他ショートコードはリンク先の「Examples」を参照してください。
※ちょっとした問題発生
問題がない人はそのままプラグインを使えば良いのですが、私の環境ではちょっと問題が発生しました。プラグインのCSSバッティング??
※問題は以下の通り
- WordPressのプラグイン「SyntaxHighlighter」とCSSのクラスがかぶって正しく表示されない。
- gist以外のソースコードにCSSが適用されない
- コード挿入後の本文が表示されない。
使っていて、ちょっと悩ましい・・・なら・・・。
プラグインを使わず、functions.phpにコードを書いてにショートコードを使ってみよう。
「どうせ簡単にしかつかわないぜ！」というなら自分でショートコードを書いてみましょう。※ショートコードを”作る”のは実は初めてですが、簡易的なものを一つ書いてみました。
テーマディレクトリにあるにあるfunctions.phpに以下のコードを記入します。
記事本文には
[myGist id=6167320]
と行ったようにショートコードを記入します。そうすれば今までと同じように
とgistのソースコードが表示されます。
※idのみの指定しかできませんがこれくらい簡単方がfunctions.phpがごちゃごちゃしなくてよいかなと。
これをプラグインにしてしまってもいいかもしれませんね。
今回のまとめ
今回本文を書いていて、実際にショートコードを書いたり、それをgistに管理、そして記事に貼付けたりしてわかったのですが、意外と使い勝手は良さそうですね。でも、まとめて管理したい場合は githubの方が良さそうです。