2月26日まで!WordPressブログが最大40%OFF!

WordPressテーマ「Minimal」で『ソースコード』を埋め込む方法

1 min

トップブロガーのマナブさん@manabubannaiが作成されたWordPressテーマ『Minimal』を使用してブログを作成しているshotaです。

他のテーマよりカスタマイズが少し難しい点がありますが、見た目がとってもシンプルでスッキリしてとても良い感じです。

そんな「Minimal」でソースコードを簡単に表示するためのプラグインを使ったカスタマイズ方法をご紹介します。よろしくお願いします。

WordPressテーマ「Minimal」で『ソースコード』を埋め込む方法

僕が使用しているプラグインを導入することにより、このようにソースコードをブログ記事に追加することが出来ます。


こんな感じ

このプラグインを導入するために以下をプラグイン名を検索します。

Prism Syntax Highlighter

検索結果の以下をインストールし、インストール後に有効化します。

設定を変更する

インストール後は設定のところに「Prism For WP」と名前を変わるので気をつけつつ、クリック。

設定画面はこうなっています。

主に3つの変更部分があり、順番に説明していきます。「select a theme」と「select plugins」は見た目に関する部分なので、プレビュー機能があります。各名前の右に「Preview」と「View demo」があるのでそこからプレビューしながら設定すると良いです。今回は僕の設定を元にご説明します。

select a theme

ソースコードを表示する箱のテーマを決める部分で、僕場合は「Okaidia」というもの設定しています。ちなみに「Dark」というのはあんまりダークっぽくないのでこちらがオススメ。

select languages

使用する言語を設定するところです。ここで設定しておかないと、ソースコードに色が付かないので、表示させたい言語をしっかり選んでおきます。僕の場合は本当は「CSS」と「Java-Script」と「PHP」と「HTML」くらいしか使わないんですが念のために画像のように設定しています。

select plugins

プラグインを設定するところです。ここで選べるのは1種類なのですが、ソースコードを表示する時に右側に番号ふれる「Line Numbers」というものがオススメです。

変更が完了したら、画面したの変更を保存を押します。これを行わないと変更内容が適用されないので注意してください。

記事中にソースコード追加する

僕の設定通りに進んでる方は以下のコードをテキストエディタで記事に追加すればOKです。


<pre class="line-numbers"><code class="language-HTML">
</code></pre>

この「language-HTML」の「HTML」の部分を使用する言語の名前に変えればそのコードが色付きで表示されるようになります。対応してない場合は文字は白色で表示されます。

小技

ちなみに表示したいソースコードの中に<>これが入ってるとうまく認識されなくなってしまうので、表示する時に記号に変換される文字を使用します。

< を表示したい場合 = 「& #60;」 (空白は消してください) 
> を表示したい場合 = 「& #62;」 (空白は消してください)

これで表示されると思います。

終わりに

WordPressテーマ「Minimal」で記事中にソースコードを追加する方法をご紹介しました。質問等がございましたらお問い合わせフォームから、もしくはツイッターに匿名の質問箱を設置してありますので、そちらからでもどうぞ。

・お問い合わせフォーム
[nlink url="http://25wall.com/contact/"]

・ツイッター質問箱

それでは。

shota

shota

客先常駐エンジニア(SES)から、フリーランスのWEBライターへ。
現在27歳、在宅でライターの仕事をしつつ、25歳の頃に辛かった経験などを元に「25歳の悩める人」へ向けて、情報を発信しています。

FOLLOW

カテゴリー:
タグ:
関連記事

コメントを残す

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