IT坊やだからさ。

ウェブディレクター/プログララマーの現役フリーランスが送るガンダム話

プラグイン

プラグインいらず!WordPressでコード記述ならGistがオススメ!

投稿日:

プラグインなしでコードは書ける

わたしの様にIT技術を記事にしている人は共通の問題を持っていることだろう。

それは記事の中に「コード」を挿入したいと言う問題だ。

テキストベースでコードを記述することは確かに可能である。

以前もタグのエンティティ化について書いた。

WordPressにHTMLやPHPのタグを表示させる方法!

タグをエンティティ化することで確かにコードをWordpressの記事の中で記述することは可能になった。

しかし、それはボリュームの少ない場合において有効な手段であり、記述コードのボリュームが大きい場合には煩わしさを感じる。

そこで他の方法でコードを記事内にしっかりと納める手段を共有したいと思う。

【Gist】プラグインなしでWordpress内にコードを記述可能

では早速、プラグインなしでコードが記述できる方法から。

解決先はこちらのサービスを使用する。

Learn Git and GitHub without any code!

最初にメールアドレスでの登録は必要になるが無料なので問題ないだろう。

このサービスを利用することでコードを生成してWordpress内で貼り付けることが可能になるのだ。

具体的な手順をここに書いていこう。

まずはサイトにアクセスしてメールアドレス登録を行う。

LearnGitandGitHubwithoutanycodeの画面

アカウントを作ったら次に「Gist」サービスを利用する。

「Gist」サービスはこちらのURLから。

Git Hug Gist

アカウントを作成しておけば「Gist」を使用することができる。

手順は次の図で示す番号の通りに実行すれば良い。

gistでコードを生成する

数字で示している手順を文字にすると次の通り。

  • コードの名称と実行ファイルの指定
  • コードの中身全て
  • コードの作成

まずは「コードの名称と実行ファイルの指定」から。

名称は好きなもので大丈夫。

実行ファイルの指定とはJavascriptであれば「.js」、バッチファイルであれば「.bat」にするなどの意味。(拡張子の指定)

これで手順1番は終わり。

次にコードの中身を記述する。

2番はコードを記述したら終わり。

最後はコード作成実行ボタンを押して終了。

コード作成を実行すると次の画面が表示される。

gistでコードを表示させる

赤枠内が重要でステータスが「Embed」になっている状態でその右側にあるURLをコピーする。

コピーしたURLをWordpressの記事に貼り付ければ2番で記述したコードが表示される。

(サンプル)

これだけなので操作は簡単である。

プラグインを使ってWordpressにコードを記述

次にオススメはしないがプラグインを使ってWordpressにコードを記述する手段をいくつか書いておこう。

わたしは上記の「Gist」サービスを使っているし、オススメしているのでプラグインは使用していない。

あくまで参考にして比較してもらえればと思う。

まずは誰もススメているプラグインが「Crayon Syntax Highlighter」

プラグインCrayonSyntaxHighlighter

オススメされているプラグインでナンバーワンだがその理由はわたしにはわからない。

次は「Simple Code Highlighter」

プラグインSimpleCodeHighlighter

作りは「Crayon Syntax Highlighter」と似ている。

面倒なのであとは全てキャプションで紹介する。

「APH Prism Syntax Highlighter」

プラグインAPHPrismSyntaxHighlighter

「APH Syntax Hightlighter」

プラグインAPHSyntaxHightlighter

「Code Colorer」

プラグインCodeColorer

全てWordpress内にコードを記述することが可能なプラグイン。

プラグインには単にコードの記述以外にも他機能を兼ね備えているものもある。

特に「Crayon Syntax Highlighter」には多くの機能が備わっている。

ただわたしがプラグインを使わないのには理由がある。

それは一貫して重くなると言う弊害だ。

これは以前、別の記事でも愚痴を書かせてもらった。

【Wordpress】Jetpackプラグインを使うの辞めました。

プラグインは便利な反面サイトの表示スピードが下がってしまうのだ。

これはSEO的にもよくなければウェブサイト運営側のわたしにとってもよろしくない。

そこでプラグインの使用は極力控える様にしている。

「Gist」とプラグインの比較

とは言えプラグインの方が利点がある場合もある。

「Gist」とプラグイン、また「エンティティ化」でコードを記述した場合、それぞれどうなるか比較してみた。

比較する要素としては「管理」のしやすさ、「操作」のしやすさ、「速度」の速さといったカテゴリーで比較する。

まずは「管理」のしやすさ。

  • Gist:★★★★☆
  • プラグイン:★★★★☆
  • エンティティ化:★☆☆☆☆

個人的には管理のしやすさは人によると思っている。

だが「Gist」を使うなりプラグインで対応するのであれば管理はしやすい。

エンティティ化で対応は都度編集が必要になるので管理はしずらいのが現実。

次に「操作」のしやすさ。

  • Gist:★★★★☆
  • プラグイン:★★★☆☆
  • エンティティ化:★★☆☆☆

「操作」に関しては「Gist」の方が良いと判断した。

それはプラグインでの「操作性」はあるだろうが、それぞれ対応する手順が異なること。

ひとつに絞らなければ使いづらい点を挙げた。

エンティティ化は一度覚えてしまえば問題ないが、それでも使い勝手は良くないだろう。

最後に「速度」の速さだ。

  • Gist:★★★★★
  • プラグイン:★★☆☆☆
  • エンティティ化:★★★★★

これは「Gist」とエンティティ化が最高速だろう。

なぜなら余計なスクリプトが動作しない分、プラグインより早いのは明白。

プラグインを実際に導入してみればわかるが速度の違いは確かにある。

結論はやはり「Gist」使用の一択になりそうだ。

ただデザイン性に優れてはいないのでその点を重視するならプラグインの使用も検討する価値があるだろう。

世の中比較だらけである。

わたしも資本主義社会で比較されてきた。

比較することは人間の定めなのだろう。

昔、身長を伸ばそうと鉄棒にぶら下がってみたが伸びたのは空しい時間だけだった。

今日も良い1日を。

      

-プラグイン

執筆者:


  1. […] プラグインいらず!Wordpressでコード記述ならGistがオススメ! […]

関連記事

Yoastでサイトマップを登録するのは簡単だよ

【WordPress】Yoastを使って簡単にサイトマップを作成!

みなさん、こんばんは。 SEOプラグインは何をお使いでしょうか。 質問をしているわたしは「Yoast」を使っている。 この「Yoast」はSEO定番のプラグイン「All in One SEO」の上位プ …

【WordPress】Jetpackプラグインを使わない理由!

【WordPress】Jetpackプラグインを使うの辞めました。

優秀な人材は中々いない。 しかし優秀なプラグインはたくさんある。 それは優秀な人材が優秀なプラグインを作りまくっているからだ。 わたしも優秀な人材に人生を作り直してもらいたいものだ。 さて、そんなくだ …

jetpackとanalyticsのPVの違い

驚愕の事実!JetpackとAnalyticsのPV数が違う原因追求!

ウェブ屋の仕事はどれだけウェブサイトを見てもらえるかが勝負である。 どれだけウェブサイトを作り込んでいても全く見られないウェブサイトは「価値がない」と言われてもしかない。 どれだけ良質であってもリーチ …

プラグインなしでWordpressに目次を作成する

プラグインなしで目次を追加!WordPressの目次の作り方!

WordPressで目次を追加してないことに気づいたので目次を追加することにした。 わたしはプラグインは使いたくないので自作で目次を作ることに。 プラグインを使えば簡単に目次は追加できるが動作が遅くな …

プロフィール

逆襲のジェリド

逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!

現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。

詳しくはこちら→ 詳細プロフィール