標準のコードブロックをちょっと格好よくしてみよう

WordPress標準で搭載されているコードブロック。pre codeタグ内にコード類を整形なしで挿入できるので、何かのカスタマイズコードを紹介したいなんて時にとっても便利ですね。

このコードブロックには、スタイルオプションを使って、他のブックと同じように文字や背景の色、枠線、文字の大きさなどが指定できるのですが、それでも何となくちょっとアレな感じしますね。

まあ、シンタックスハイライター系のプラグインを使えば、きれいに表示できるんだけど、そこまでする必要もないし、なんとなく格好よくなればいいなぁという方向けのカスタマイズ方法です。

コードブロックの見栄えをよくする方法

デザイン（見た目）を変える

早速ですが、以下のコードを有効化しているテーマのstyle.cssやテーマカスタマイザーの追加CSSへ追記すれば、このサイトと同じ見た目になります（2023年4月7日現在のデザインなので、ひょっとすると変わっているかも．．）。

/*** コードブロックの装飾 ***/
.wp-block-code{
	padding:unset;
	border-radius:unset;
	border:1px solid #ddd;
}

.wp-block-code code {
	white-space: unset;
	overflow: auto;
	font-size:0.8em;
	padding:1em;
}

pre.wp-block-code {
	transition: background-color 0.2s linear;
}

pre.wp-block-code:hover {
	background-color: #00000020;
	border:1px solid #666;
}

やっていることは

• 文字を折り返さず、長い構文はスクロールバーを出す
• シャープな印象を持たせたいので、枠線の角の丸みを削除
• ホーバー時に背景色をちょっとゆっくり変化させ、枠線色を少し濃くする
• コード自体はそれほど大きな文字で表示させる必要がないので、通常の文字と比べておよそ80%のサイズにする

というところです。まあまあこの辺はやられている方も多いでしょう。

それほど難しいコードでもないので、スタイルコード内の数字などを変えて好みの感じにしてください。

どこかをクリックするとコードがコピーされるようにする

これは、以下のプラグインを使うのが手っ取り早いです（コード系のプラグインのように速度を低下させたりすることはまずないと思います）。

プラグインのプログラムは本当に簡単に作られているので、プラグインのソースをあれこれして、テーマに飲み込ませてしまうのもアリでしょう。

ちなみに本サイトで配布している【Hima Art Utility】2.2以降では、このプラグインのコードを流用して、機能として追加しています。

．．．以上が本サイトのコードブロック（上のCSSの表示もそう）のようにする方法なのですが、これで終わってしまうのはちょっと残念なので、ついでに、ブロックを選択した後で、スタイルを変更できるようボタン化してみてはいかがでしょう？

この方法を応用すれば、結構いろいろなブロックに1クリックで変更できるカスタムデザインを作れますよ

デザイン切り替えボタンを追加する

余談ですけど、昔は結構デザイン切り替えボタンの追加は複雑な作業が必要でした。でもバージョンいくつか？（よく覚えていません）からとっても簡単になりました。

以下のコードを有効化しているテーマのfunctions.phpへ追加すれば、コードブロックを挿入した際の右サイドバーにデザインボタンが表示されるようになります。

/***** コードブロックの装飾 *****/
if ( !function_exists( 'sample_register_block_design_styles' ) ){
function sample_register_block_design_styles() {

	register_block_style('core/code', array(
	'name' =>  'original-code-block',
	'label' => __( '格好いいコード','textdomain'),
  ));
}
}
add_action( 'init', 'sample_register_block_design_styles');

if ( !function_exists( 'sample_block_design_style_init' ) ){
function sample_block_design_style_init(){
$custom_css_pre = '
/* コードブロック */
.is-style-original-code-block{
padding:unset;
border-radius:unset;
border:1px solid #ddd;
}

.is-style-original-code-block code{
white-space: unset!important;
overflow: auto;
font-size:0.8em;
padding:1em;
}

pre.is-style-original-code-block{
transition: background-color 0.2s linear;
}

pre.is-style-original-code-block:hover {
background-color: #00000020;
border:1px solid #666;
}
';

//スタイルコードを改行なしで整形する
$custom_css = str_replace(PHP_EOL, '', $custom_css_pre);

wp_add_inline_style( 'core-block-supports', $custom_css );
wp_add_inline_style( 'wp-edit-blocks', $custom_css );
}
}
add_action( 'init', 'sample_block_design_style_init');
add_action( 'wp_enqueue_scripts', 'sample_block_design_style_init');

一応私のテスト環境で動作チェックを行ったコードですが、環境によってはひょっとするとうまく動かないかも知れませんのでご了承ください

ここではコードだけにしておきますが、ブロックに独自のデザインを追加してボタン選択できるようにする方法については以下で詳しく説明していますので、よかったらご覧ください。