Code

【WordPress AFFINGER5の使い方】記事にソースコードを表示する方法|Google Code-Prettify

2020年10月7日

こんにちは、イケゾーです。

 

今回は、ワードプレステーマ「AFFINGER5」のカスタマイズを解説していきます。プログラミング系のブログを書いていると、ソースコードを載せたくなります。「AFFINGER5」に最初から搭載されているコード機能を使ってみましたが、どうですか?

 index.html
<div class="text-center pb-5">
<h2>SERVICES</h2>
<p>Lorem ipsum dolor sit amet, conse at.</p>
</div>
イケゾー
なんだかイマイチ・・・ってことで、カスタマイズに挑戦してみました

僕自身、ワードプレスを初めて2週間なので、そんな初心者でもわかるように詳しく書いていきますね。所要時間は、初心者がこの記事を見ながら30分くらいですね。僕はすべて自分で調べながらやったので、半日かかりました 😥

この記事を読むと、「AFFINGER5」で記事内にソースコードを綺麗に埋め込む方法が分かります。

 

【WordPress AFFINGER5の使い方】記事にソースコードを表示する方法|Google Code-Prettify

ソースコードを表示する方法はいくつかあり、プラグインを使ったり「Prism.js」というのを使う方法があります。

下記の理由で、僕は「Google code-prettify」を使う方法を解説しています。

簡単

サイトを重くしたくない

デザインをカスタマイズできる

 

 

「AFFINGER5」デフォルトのソースコード表示

AFFINGER5では、デフォルトでソースコード表示機能があります。まずはこちらを使ってみましょう。

記事投稿画面

タグ▶︎ボックスデザイン▶︎pre:ternimal

 

記事の本文
オレンジとオレンジの間にソースコードを入力します。

 

こんな感じで表示されます
 index.html
<div class="text-center pb-5">
<h2>SERVICES</h2>
<p>Lorem ipsum dolor sit amet, conse at.</p>
</div>

まあ悪くないけど、ちょっとシンプルすぎるというか、もうちょっとデザインを付けたいですね。必要最低限ではありますが、もう少し読者の方に分かりやすくしたいなと感じますね。

ということで、デザインを自由自在にカスタムできる「Google code-prettify」を導入していきましょう 🙂

 

「Google code-prettify」を使ってみる

手順は4つで、所要時間は30分くらいです。

  1. ダウンロード 5分
  2. アップロード 10分
  3. ファイルの読み込み設定 15分
  4. デザインの調整 (気が済むまで)

 

ダウンロード

「Google code-prettify」をダウンロードします。
クリックするだけで、ダウンロードできます。

ダウンロードする

 

ダウンロードしたファイルを解凍すると、たくさんファイルがありますが、使用するファイルは4つです。
では、4つのファイルを選択して、新規フォルダを作成します。
ファイル名は自由ですが、「code-prettify」としておきます。

使用するファイルは下記の4つです

  • skinsフォルダ
  • lang-css.js
  • prettify.css
  • prettify.js

 

アップロード

次に、今作成したフォルダ「code-prettify」を、サーバ上の子テーマにアップロードします。

※サーバは、Xserverを使用しています。サーバによって画面は異なりますが、同じように進めてください。

Xserverのファイル管理画面

 

affinger5-childにデータをアップロードします。

大体の方はこんな感じのパスになるかと思います。

https://ドメイン名/public_html/wp-content/themes/affinger5-child/code-prettify

 

アップロード画面

 

Xserverで、新規フォルダやファイルを作る画面

イケゾー
良いですね、順調です

 

ファイルの読み込み設定

次に、サーバ上に置いたファイルを読み込んでいきます。

AFFINGER管理画面にコードをいくつか追加するだけです。

 

Xserverで、新規フォルダやファイルを作る画面

管理画面▶︎AFFINGER管理▶︎その他▶︎コードの出力

上記の2箇所にコードをコピペしてください。

cssファイルの読み込み
<link rel="stylesheet" type="text/css" href="https://ドメイン名/wp-content/themes/affinger5-child/code-prettify/skins/desert.css">

 

jsファイルの読み込み
<script src="https://ドメイン名/wp-content/themes/affinger5-child/code-prettify/prettify.js">
<script src="https://ドメイン名/wp-content/themes/affinger5-child/code-prettify/lang-css.js">
<script>
  window.addEventListener("load", function() {
    PR.prettyPrint();
  });
</script>

 

初心者つまずきポイント

ファイルをアップロードしたパスと、コードのsrc属性に書くパスは異なります。public_htmlが不要になります。

サーバーのパス:http://ドメイン名/public_html/wp-content/themes/affinger5-child/code-prettify/desert

src属性に書くパス:http://ドメイン名/wp-content/themes/affinger5-child/code-prettify/desert

イケゾー
よしゃ、これで使えるようになりましたよ。

 

使ってみる

使ってみましょう。まずはテキスト入力画面にしてください。

記事で表示したい文字列をprettyprintクラスを指定した<pre>タグで囲みます。

 

code-prettify は 、prettyprint クラスを指定した <pre> タグを探し、その中のコードや文字列を <span> 要素で囲んでスタイルを設定します。

こんな感じで表示されます
body{
color:#ccc;
}

 

イケゾー
できた!あとは好きなデザインに変更しよう

デザインの調整

デザインは、いくつか用意されていて、読み込むcssファイルを変更するだけでOKです。

今回の例では「desert.css」を指定しましたが、ギャラリーから好きなものを選びます。

使用した「skinsフォルダ」にデータが格納されています。

 

さらには、自分でコードを修正したり、追加したりしてお好みのデザインに変更ができます。

このあたりは、また別記事にてアップしますね。

 

おわり

以上です。簡単な設定ですが、初心者なので半日近く格闘しました。

誰かのお役に立てれば嬉しいです。

このブログでは、効率的で楽しい「健康プログラミング」を発信しています。

 

ぜひ、他の記事もご覧ください。

 

  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-Code
-, , , ,

© 2021 IkezoooBlog