GitHubについてもう少し知ってみる。その6(WordPressでGistを使ってみよう)

ようこそのお運びで厚く御礼申し上げます。

さてさて、今回は前回の続きで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バッティング??
※問題は以下の通り

使っていて、ちょっと悩ましい・・・なら・・・。

プラグインを使わず、functions.phpにコードを書いてにショートコードを使ってみよう。

どうせ簡単にしかつかわないぜ!」というなら自分でショートコードを書いてみましょう。※ショートコードを”作る”のは実は初めてですが、簡易的なものを一つ書いてみました。

テーマディレクトリにあるにあるfunctions.phpに以下のコードを記入します。

記事本文には

[myGist id=6167320]

と行ったようにショートコードを記入します。そうすれば今までと同じように

とgistのソースコードが表示されます。

※idのみの指定しかできませんがこれくらい簡単方がfunctions.phpがごちゃごちゃしなくてよいかなと。
これをプラグインにしてしまってもいいかもしれませんね。

今回のまとめ

今回本文を書いていて、実際にショートコードを書いたり、それをgistに管理、そして記事に貼付けたりしてわかったのですが、意外と使い勝手は良さそうですね。でも、まとめて管理したい場合は githubの方が良さそうです

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です