技術メモ 読む時間 約2分

WordPress ソースコードを記事で見やすくする ( Highlighting Code Block )

WordPress ソースコードを記事で見やすくする ( Highlighting Code Block )

投稿画面でコードを色分けして表示できる

プラグインを導入しハイライトコード用のブロックからソースを記述することで上記のような表示のソースコードが簡単に表示できるようになります

表示のサンプル

例として、絞り込み検索の記事で使ったコードを載せています。このサイトのコードの枠も、このプラグインで表示しています。言語や行番号の表示は、ブロックの右側の設定で選べます。

<?php
// ショートコードにて生成した検索フォームのhtmlを取得
$search_form = do_shortcode( '[searchandfilter fields="search,category,post_tag" headings="キーワード,職種,分類" types=",checkbox,radio" submit_label="検索"]' );

// 取得したhtmlを任意の内容に修正
$search_form = str_replace('<input type="text" name="ofsearch" placeholder="Search …" value="">', '<select name="ofsearch"><option value="">未選択</option><option value="パンダ">パンダ</option><option value="キリン">キリン</option></select>', $search_form);

// 検索フォーム表示
echo $search_form;
?>

この記事を書いた人

フリースタイル

Web の仕事 25 年以上。WordPress の保守・引っ越しと、PHP の業務の仕組みづくり。 プロフィール →

まずは、お気軽にご相談ください。

相談と見積もりは無料です。急ぎのときは、フォームで「急ぎ」を選んでください。

相談のフォームから送る ランサーズから依頼する

ランサーズでのやりとりも、同じ担当がお受けします。

メールでも受け付けています:info@fs-create.net