シンプルなWordPressテーマ

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように
便利な機能を織り込んで作りました。
100%GPLテーマなので自由にご利用いただけます。

ダウンロードページはこちら。

ダウンロード

ソースコードをハイライト表示させる方法

投稿・固定ページ

Cocoonは、テーマデフォルトの機能でソースコードをハイライト表示させることができます。

例えばこんな感じで。

.main {
  width: 860px;
  margin-right: 20px;
  padding: 20px 29px;
  border: 1px solid transparent;
  border-radius: 4px;
  position: relative;
}

ソースコードのハイライト表示には、jQueryプラグインのhighlight.jsを利用しています。

スポンサーリンク

ソースコードのハイライト機能

ソースコードハイライト機能の設定を行うにはテーマの設定で行います。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

ハイライト表示の設定は、「コード」タブで行います。

ソースコードの設定はコードタブで行う

それぞれの項目の説明はこちら。

ハイライト表示

preタグをハイライト表示するかどうかの設定です。

ハイライトスタイル

表示スタイルを変更することが可能です。

表示サンプルはこちら。

highlight.js demo

「Styles」項目から様々なスタイルを試してみることができます。

ハイライト表示スタイル

ハイライト表示するCSSセレクタ

「ハイライトするCSSセレクタ」では、ソースコード表示用のCSSセレクタを設定します。

デフォルトでは、以下のようなCSSセレクタになっており、「本文記事中のpreタグで囲まれたもの」がハイライト表示されます。

.entry-content pre

ハイライト表示したい要素が違う場合は、ここからCSSセレクタを変更してください。この機能により、どのような要素内のソースコードでもハイライト表示できるかと思います。

ソースコード挿入時の設定

テーマデフォルトでは、本文記事内(.entry-content)のpreタグ内のテキストがハイライト表示されます。

なので、以下ではpreタグで書き込むことを前提に、説明します。

ソースコードを挿入する

ソースコードを挿入するには、preタグを用いて、以下のように記入してください。

<pre>//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )</pre>

すると以下のように表示されます。

//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )

単に、<pre>と入力すれば、言語はある程度自動判別されて表示されます。

言語を指定してハイライト表示する

言語を指定してハイライト表示するには、<pre class=”php”>とか<pre class=”html”>のように指定してタグを挿入します。

<pre class=”php”>//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )</pre>

すると、以下のように表示されます。

//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )

classに指定する言語名については、以下のページの「Language names and aliases」を参照してください。

CSS classes reference — highlight.js 9.12.0 documentation

例えば、Apacheのソースコードを表示させたい場合は、<pre class=”apache”>もしくは<pre class=”apacheconf”>と入力します。

Apacheのソースコードを表示させたい場合

ハイライト表示させない

ハイライト表示させたくない場合は、<pre class=”nohighlight”>と記入します。

<pre class="nohighlight">//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )</pre>

すると以下のように表示されます。

//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )

注意点

highlight.jsを使用したソースコードのハイライト表示ですが、試用する際は以下の点に注意してください。

HTMLエスケープをしてからソースコードを挿入する

例えば、以下のようなHTMLを挿入するときは、

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

以下のようにHTMLエスケープしてから、挿入してください。

&lt;ul class=&quot;nav nav-tabs&quot;&gt;
&lt;li role=&quot;presentation&quot; class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li role=&quot;presentation&quot;&gt;&lt;a href=&quot;#&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li role=&quot;presentation&quot;&gt;&lt;a href=&quot;#&quot;&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<pre>タグで囲ってあっても、HTMLなどはHTMLとして出力されます。

HTMLエスケープを行うには、以下のウェブツールなどを利用してみてください。

HTMLエスケープツール | Web制作小物ツール - dounokouno.com
HTML Escape / Unescape
テキストをHTMLエスケープしたり、戻したりするツールです。スマホ表示に最適化しています。
HTML特殊文字変換|コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited
HTML特殊文字の変換ツール。HTMLやコードをホームページに載せる時にHTML的に特殊な意味を持つ特殊文字を正常に表示されるように変換するツールです。

エスケープツールは、どれでも使いやすいものを使えば良いと思います。

プラグインのCSSが優先されることも

デフォルトでは、本文中のpreタグ内がハイライト表示されます。

けれど、プラグイン等でpreタグに優先度の高いCSSセレクタでスタイルが設定されていた場合は、優先度の高い方のスタイルが適用されます。

例えば、WordPressでフォーラムを運営するbbPressプラグインを利用した場合などは、スタイルの優先度がbbPressのものの方が高いです。ですのでpreには、bbPressのスタイルが、適用されます。

なので、プラグイン等で優先度の高いスタイルが適用されていた場合は、それを上回る優先度のCSSセレクタで、ファイルを上書きするなどの処置を行う必要があります。

例えば、暗色系のテーマの「monokai-sublime」などを利用した場合は、bbPressのスタイルが優先されてしまうため、背景色が明色になってしまい、文字が非常に見づらいです。

そういった場合は、以下のように独自にスタイルを書く必要があるかもしれません。

.entry-content #bbpress-forums div.bbp-topic-content pre,
.entry-content #bbpress-forums div.bbp-reply-content pre{
  background-color: #23241f;
  color: #fff;
  line-height: initial;
}

まとめ

こんな感じで、表示言語を自動判別に任せるのであれば、結構手軽にソースコードのハイライト設定ができます。

WordPressプラグインほど機能は豊富ではありませんが、ちょっとしたソースコードのハイライト表示なら、こちらの方が、ページ表示を断然軽く出来るかと思います。

というわけで「ソースコードをハイライト表示させたいけど重たいプラグインをインストールしたくない」なんて場合には、便利な機能になるかと思います。

投稿・固定ページ
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
〇アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon

コメント