ユニソルデザインの備忘録
記録
2023.01.18

WordPressの投稿記事内にソースコードをそのまま載せたい！

  • Onigiri
  • 毎日が手探りWEBデザイナー、好きなおにぎりの具は鮭！なおにぎりです。
    備忘録（NOTEBOOK）をつけていこうと思った最初の段階で気づいたのですが
    「投稿記事内にコード書いたらなんかほらうまく言われへんけど表示になってまうやん」
    でした。
    やる前に気づいたので実際そうなるのかどうかは試していませんが、多分なりますよね。
    当たり前でしょとかそういうのはもう無しにしてください、私はただ単純に「コードはそのまま掲載したい。」だけなのです。
    でも難しいのは嫌だからプラグインで時短解決したい。
    と思ったので以下対応をしました。

使用するプラグインは「Highlighting Code Block（ハイライティングコードブロック）」です。

Highlighting Code Block

 

参考にさせていただきました。（知りたいことをさらっと掲載してくれています。解決が早い！）

[WordPress] ブログにソースコードを書くのに便利なプラグイン – “Highlighting Code Block”

Highlighting Code Blockをインストールして設定して投稿！

  • ★プラグインのインストールと設定
  • ★投稿記事内での使い方

難しいことはなくてすごくシンプルでした。

新規プラグインから検索してインストール＞有効にしたらもう使えます。

  • メニューから「プラグイン」を選んで
  • ▼
  • 「新規追加」ボタンを押して
  • ▼
  • 右上の検索ボックスに「Highlighting Code Block」を入れると出てきますね！
  • 「いますぐインストール」ボタンを押して数秒後に
  • ▼
  • 「有効化」ボタンに変わるので
  • ▼
  • 「有効化」ボタンをクリック

これで投稿記事内にコードをそのまま掲載できる準備ができました！

今更ですがこう言うのを「コードブロック」とか「シンタックスハイライト」とか言うみたいです。
「ソースコードそのまま載せたい！」とか「ブログ コード 載せる WordPress」で検索してました。
最初って呼び方わからないからなんかほらこんな感じにしたいんだけど何て言うのかわからない…てなって検索するので、
どうやって検索してそれにたどり着いたかとか色々キーワードを記事内に入れてくれてるとありがたいですよね。
Googleさんが「ほら探してるのこれやろ…」って導いてくれてるのかもしれませんが…

 

インストールしたら設定を見てみます。

デフォルト設定のままで使えると思いますが、背景色を変えたい場合はここで変えます。
フォントサイズもPCとSPで変更できますね。
私はデフォルト設定のまま進めます！

投稿記事内でコードをそのまま載せる方法（落とし穴がありました）

プラグインもインストールしたし有効化したし設定もOK！よし、試してみるか！シンタックスハイライト！
と記事を新規投稿画面に来てみたのですが、表示されていません。

表示されているはずのコードそのまま載せるための記載がどこにもないです。
いつもテキストタブで投稿しているから、もしかしたらビジュアルタブからの投稿なら…と思い切り替えても表示されていない…。
どうしてーーーーーーーーもーーーーーーーとなっていたら、単純なことでした。

「ツールバー切り替え」を押したら出てきました。

なんだよ！！！！でもよかったよ！！
使用しているワードプレスのテーマによっては表示されないこともあるみたいです…
落とし穴ですね。
ビジュアルタブでコードだけ書いて、他はいつもの通りテキストタブからテスト投稿をしてみます。

<ul>
<li></li>
<li></li>
<li></li>
</ul>

わーーーーー表示されましたーーー
よかった

 

では今回はこの辺で。

その他の記事