lightning テーマをカスタマイズ プラグイン編

このページは、当サイト管理人が、WordPress を使ってサイトを作成後、カスタマイズをするにあたって、HTMLやCSSの知識は多少あったものの、WordPress の構造やPHPの知識は皆無だったため、いろいろなサイトの情報をもとにカスタマイズを行ったので、それを忘れないための覚え書きのページです。

WordPress のカスタイズのため、このページを訪れた方がいらっしゃいましたら参考にしていただければと思います。また、参考にさせてもらったサイトの管理者さま本当にありがとうございました。

おすすめプラグインのご紹介

当サイトにインストール「有効化」している便利なプラグインをご紹介します。

WordPressテーマ「Lightning」をインストールして有効化すると以下の2つのプラグインのインストール+有効化を求められます。

「Ligthning Advanced Unit」
「VK All in One Expansion Unit」

インストールをクリックすると下図になりますので、
インストールして有効化してください。

この2つのプラグインはLightningの機能を拡張するためのプラグインです。

「Ligthning Advanced Unit」はLightning専用ですが、
「VK All in One Expansion Unit」は他のテーマでも使えるので便利です。

詳しくは下記を参照してください。
Lightning Advanced Unit (無料)

VK All in One Expansion Unit (無料)

ソースコードを埋め込むプラグイン

次は、ワードプレスにHTML/CSS や JavaScript などのソースコードを綺麗に表示させるプラグイン「Crayon Syntax Highlighter」を紹介します。
管理画面 > プラグイン から検索してインストールしてみてください。

「お使いのバージョンのWordpressではテストされていません」と表示されていますが、2017/11/21 現在、バージョン 4.9–ja で問題なく使えています。

実際の表示サンプルです。

5,6,7 行のように黄色でハイライトすることもできます。

管理画面の 設定 > Crayon から設定できます。

以下は設定画面の図です。図の下に日本語化ファイルのダウンロード インストール方法を記載しておきます。

日本語化ファイルのダウンロード インストール方法

日本語化は、以下のサイトで公開されていますので、必要であればダウンロードしてみてください。
Crayon Syntax Highlighter の日本語表示

crayon-syntax-highlighter-2.8.4-ja-files-160511.zip

をダウンロード後、解凍します。すると

crayon-syntax-highlighter-2.8.4-ja-files-160511
フォルダーの中に以下の2つのファイルがあります。

・crayon-syntax-highlighter-ja.po
・crayon-syntax-highlighter-ja.mo

これを、Crayon Syntax Highlighter プラグインのインストールフォルダ
「/wp-content/plugins/crayon-syntax-highlighter/trans」にコピーするだけです。

日本語にならない場合の対処方法

配布サイトとダウンロードファイルに対処方法も掲載されていますが、ここでも書いておきます。

万が一日本語にならない場合は、
WordPressのインストールフォルダ「/wp-content/languages/plugins/」に有る
「crayon-syntax-highlighter-ja.mo」ファイルをFTPで別途バックアップします。

そしてバックアップした
「/wp-content/languages/plugins/crayon-syntax-highlighter-ja.mo」ファイルをワードプレスから 削除して下さい。

※日本語化ファイルをアップロードするディレクトリと今回の削除するファイルは別のディレクトリになるので、混同しないように気を付けてくださいね。

私はこれで、日本語化できました。しかし、Wordpress をバージョンアップしたり、テーマを変更したりすると、削除したファイルが自動インストールされるため英語表示になりますので、その際は再度、当該ファイルを削除する必要があります。
でも、一度設定してしまえばそんなに設定を変えることはないので、英語表示でも問題ないかもしれません。

詳しくは、配布サイトでご確認ください。