【WordPress】たまにソースコード書く程度なら「引用タグ(blockquote)でソースコード表示」すれば良いんじゃないか?簡単だし。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

このサイトではたま〜に、ソースコードを書くことがあります。

このサイト(WordPressで構築)のカスタマイズや他のWordPressサイトのカスタマイズのメモ書きのために。

その程度の感覚なら、

web技術系のサイトを運営しているので“ない”のなら、

のちのち管理も手間もかからない、ごくごくシンプルで、web技術系の素人の私達にもできる「引用タグ(blockquote)」でソースコードを囲うのが、最も簡単で良いんじゃないか、と思いました。

スポンサーリンク

プラグイン「Crayon Syntax Highlighter」は(私は)使えなかった

前、運営していたWordPressカスタマイズをメモ書きしていたサイトではWordPressプラグインのCrayon Syntax Highlighterを入れていました。

ただ、このプラグインで表示させたソースコードをコピーしようとすると、行番号までなぜかコピーされるんですよね。私の設定が悪いのか、なんなのかわかりませんが、行番号までコピーされたら、たまったもんじゃありません。邪魔です。

なのでCrayon Syntax Highlighterは私の中で排除しました。

プラグイン「SyntaxHighlighter Evolved」もめんどくさい

次にこのサイトでもソースコードを表示しようと思ったので、次はSyntaxHighlighter Evolvedというプラグインを入れてみました。

今度はこのプラグインではソースコードを表示させるために、言語指定をしなければならないようです。例えばCSSを使う表示させたい場合と、PHPを表示させたい場合では、指定方法が変わります。つまりそれぞれ覚えなければならない。これはめんどくさい。(どこまでめんどくさがりなんだ 笑)。

ということでこれも排除。

webサービス「Gist」もめんどくさい

だったらwebサービスだとどうなんだ?ということで調べてみると、次の記事にあるように、

参考:WordPressでコードをお手軽に表示するにはプラグイン要らずのGistがオススメ!シンタックスハイライトも最近の言語に即対応 / もっと知りたいリンゴあれこれ

Gistというwebサービスなら、それほど手間もかからずソースコードを表示できるようです。

Gistを実際に試したわけではありませんが、この方法を使うならソースコードを表示させようとする度に、Gistにアクセスしなければなりません。それもめんどくさい。

だいたい忘れやすい私はGistの存在自体を忘れる可能性がありますし、盛りだくさんで日々増えていくブックマークにもGistは埋もれてしまう可能性があります。

さらに、「Gistというwebサービスが消滅したら、WordPressに載せていたたくさんのソースコードはどうなるの?」という不安もつきまといます。

(注:実際にGistを試したわけではないので正しくない意見かもしれないです。)

なのでこれも排除。

スポンサーリンク

普通に引用タグ(blockquote)でソースコードを表示させれば良いじゃん!

どうしたもんかと考えていたら、ひらめきました。

「普通に引用タグ(blockquote)でいいじゃん!」

引用タグ(blockquote)ならWordPressに標準装備されてますし、この先何十年と「引用」という概念は続いていくと思われます。

つまりどれほどWordPressがバージョンアップしようとも、どれほど色々なWordPressテーマを渡り歩こうとも、「引用タグ(blockquote)」は永遠不変なわけです。

さらにWordPressを引っ越しっした際にも、その部分を編集する必要もありません。

めっちゃ簡単で楽じゃないですかっ!!

なので、もしあなたが私と同じように、

「それほど本気でweb技術系サイトを運営してるわけではないけど、たまに軽い気持ちでソースコードをWordPressで表示させることがある」

という程度なら「引用タグ(blockquote)でソースコードを囲う」のが最も簡単で、最も管理の手間がかからない(というか管理ゼロ)方法だと思います。

私はとりあえず、この方法でソースコードをこれから表示していこうと思っています。

引用タグ(blockquote)でソースコードを表示させる方法

私の場合、次の手順で引用タグ(blockquote)を使ってソースコードを表示させています。

  1. プラグイン「AddQuicktag」をインストール→有効化
  2. AddQuicktagに「<pre><code></code></pre>」をボタン登録
  3. 記事投稿時にそのボタンを押して「<pre><code></code></pre>」呼び出し、ソースコードを書き込む
  4. ソースコード部分を引用タグ(blockquote)で囲む

1.プラグイン「AddQuicktag」をインストール→有効化

まず、プラグインの「AddQuicktag」をインストールして有効化します。

2.AddQuicktagに「<pre><code></code></pre>」をボタン登録

次に「設定>AddQuicktag」からAddQuicktag設定画面に移動。

ここで、「<pre><code></code></pre>」を記事投稿画面で呼び出すためのボタンを作成する。

  • ボタン名、ラベル名に「ソースコード」と入力
  • 開始タグに「<pre><code>」を入力
  • 終了タグに「</code></pre>」を入力
  • 「ビジュアルエディター」「post」にチェックを入れる
  • 最後に変更を保存する

AddQuicktagでpre,codeタグ呼び出しボタンを登録

3.記事投稿時にそのボタンを押して「<pre><code></code></pre>」呼び出し、ソースコードを書き込む

すると、ヴィジュアルエディターとテキストエディターで、今登録した「ソースコード」が表示されるようになります。

ビジュアルエディター
ビジュアルエディターで「ソースコード」

テキストエディター
テキストエディターでソースコードボタン

  • ビジュアルエディターでは「<pre><code></code></pre>」が一発で呼び出されます。
  • テキストエディターでは一度ボタンを押すと「<pre><code>」が呼び出され、二度押すと「</code></pre>」が呼び出されます。

私の場合はビジュアルエディターで「<pre><code></code></pre>」を一発で呼び出して、次にテキストエディターに切り替えて、タグに囲まれた部分にソースコードを書き込むのが好みです。

(例:<pre><code>ここにソースコードを書き込む</code></pre>)

4.ソースコード部分を引用タグ(blockquote)で囲む

最後にソースコード部分を引用タグ(blockquote)で囲みます。

私の場合は、ビジュアルエディターのボタンで囲みます。

引用(blockquote)

これで完了です。

サンプル

例えば次のように表示されます。

/* 全ての画像に枠線を付ける */
img {
border:1px solid #dddddd;
}

Crayon Syntax Highlighterのようにコピーした時に行番号が付いてくる心配もありません。

もし強調したい部分があれば、太字にしたり色をつけたり、今までの感覚で文字に装飾を行うこともできます。

個人的にはこれで満足。

んではではではっ。

スポンサーリンク


  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*