・WordPressにソースコードの埋め込みを分かりやすくする方法
・プラグイン導入方法と注意すべき点
当サイトを立ち上げてから1ヶ月少し経過しました。
記事掲載のみが先行しているためレイアウトや記事の見やすさを飛ばしている状態でした。
先日、ようやくサイドバーを追加してブログっぽい形になった次第です。
今回は過去に記事を書いていく中で気になった、ソースコードの埋め込みが分かりづらい点を解消していきたいと思います。
導入プラグインの紹介
導入するプラグインは「Code Syntax Block」です。
このプラグインは有名なのと、使用中のWordPressバージョンとの互換性があるため選択しました。
プラグインのインストール
WordPressのプラグインのインストールは非常に簡単です。
管理コンソールの「プラグイン」リンクを選択します。
移動後、キーワードに「Code Syntax Block」を入力します。
「Code Syntax Block」 の箇所にある、「今すぐインストール」を選択します。
インストール完了後、「Activate」を選択してプラグインを有効化します。
以上でプラグインのインストールと有効化が完了しました。
インストールしたプラグインの使い方
「Code Syntax Block」 プラグインが使えるようになりましたので使い方も含めて確認します。
WordPressの投稿はブロック単位で記載します。
ブロックの中には見出しやリストなどのタイプがあります。その中にある「コード」タイプを利用します。
コードタイプに変更したブロックに、コードを入力します。
今回は適当にJavaScriptっぽいコードを入力しました。
入力後、ソースコードのタイプを設定します。
対象のコードタイプを選択して、設定のLanguageからソースコードの言語を選択します。
上記で設定したコードは下記となります。
function test(){
concole.log("コード引用テスト")
}以上がプラグインの使い方です。
黒背景のため他の文字との差別化も出来て、色のおかげで目立つ形となりました。
プラグイン導入の注意点
今回、WordPressのプラグインをインストールした際、なるべく避けたい点と確認方法を紹介したいと思います。
利用しているWordPressのバージョンとプラグインが対応しているか確認した方が良いです。
気にする程では無いと思いますが、未確認のプラグインを導入した結果、機能しない場合も考えられますので導入するプラグインは慎重に選んだ方が良いです。
導入するプラグインが、利用しているWordPressのバージョンに対応しているか確認出来る方法は下記画像のように、「使用中のWPバージョンと互換性あり」と記載があれば対応しています。
もちろん未対応だからといって、機能しないということは無いです。動作不良の際に対応出来る力量があれば問題無いと思います。
そういった調査時間などが惜しく、他に選択肢があるならそちらを選ぶべきだと考えています。
最後に
プラグインの導入方法と注意点の紹介は以上となります。
当然ですがプラグインは過去記事の箇所を自動的に反映させてもらえないので、記事が多くないときにインストールした方が良いですね。
