git・github

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

更新日：

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

さてさて、今回は前回の続きでGistについてもう少し書いてみます。
といっても多分、WordPressメインで書いてしまうのであまりGistとは関係ないかもしれませんが、お付き合いよろしくお願いします。

今回の目次

  • WordPressでGistを使うには？
  • Gistで作ったソースコードのシリアルNoとは
  • WordPressのプラグインがあるかな？
  • プラグインEmbed GitHub Gistを使ってみる
  • ちょっとした問題点。
  • プラグインを使わず、function.phpにコードを書いてにショートコードを使ってみよう。

今回は作っちゃいます。
ではさっそくやってみましょう。

WordPressでGistを使うには

ソースコードは前回の記事から同じものを使います。まずは基本から。

WordPressの場合だと、上記のコードを「ビジュアル/テキスト」入力画面の「テキスト」を選択して貼付けます。が・・・しかし、「ビジュアル/テキスト」を切り替えると、上記のスクリプト内に勝手に変なコードが挿入され表示されなかったり、切り替えが面倒で手間でわかりにくい、ということが発生してしまいます。

Gistで作ったソースコードのシリアル番号とは

Gistで作った各々のソースコードにはシリアル番号が割り当てられています。スクリプト内のファイル名

src="https://gist.github.com/snoise/6156114.js"

の「6156114」という部分がシリアル番号になるので、こちらを使ってプラグイン等を模索していきます。

WordPressのGistのプラグインはあるかな？

まぁ、ないはずがないんですけどね（笑）。たくさんプラグインがあるみたいなので、とりあえず有名所を使ってみます。

こちらのプラグインをWordpressにインストールします（インストールの仕方は省略）。

プラグインEmbed GitHub Gistを使ってみる

※Embed GitHub Gist(Version 0.13)について簡単な使い方を書いてみます。

挿入するショートコードには何種類かあるみたいですが、

001
[gist id=6156114]

が最も簡単っぽいショートコードです。「6156114」の所にはシリアル番号を入れて記事本文にそのまま記入します。
そうすると、簡単に挿入することができました。
※表示例がないのは、このページでちょっと問題が発生→次へ

※その他ショートコードはリンク先の「Examples」を参照してください。

※ちょっとした問題発生

問題がない人はそのままプラグインを使えば良いのですが、私の環境ではちょっと問題が発生しました。プラグインのCSSバッティング??
※問題は以下の通り

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

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

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

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

<?php
//#######################
//ショートコードを作成：gist(myGist)
//#######################
function shortCode_gist($atts,$content = null ){
extract( shortcode_atts( array(
'id' => "" ), $atts) );
$script = '<script src="https://gist.github.com/%s.js"></script>';
return sprintf($script,$atts['id']);
}
add_shortcode('myGist','shortCode_gist');
?>
view raw function.php hosted with ❤ by GitHub

記事本文には

001
[myGist id=6167320]

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

<?php
Class CodeTest{
public $name;
public function __construct($name = '名無し'){
$this->name = $name;
}
public function morning(){
echo $this->name."さん、おはようございます。";
}
public function daytime(){
echo "こんにちは!!".$this->name."さん";
}
public function night(){
echo $this->name."さん、こんばんはー。";
}
public function goodNignt(){
echo $this->name."さん、おやすみなさい";
}
}
?>
view raw code_test.php hosted with ❤ by GitHub

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

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

今回のまとめ

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

-git・github
-, , , ,

S