概要
リストブロックにcssなどを当てるとツリーっぽく表示できます。
背景
記事内で↓のようなディレクトリツリーを書きたかったのですが、かなり迷走したので備忘録としてまとめます。
やりかた
WordPress詳しくないのでかなり迷走しましたが、結局いじるのは3ファイルだけです。
- テーマのルートディレクトリ
- functions.php
- blocks ← デフォルトではない
- css ← 当然ない
- block_style.css ← 当然ない
- js ← 当然ない
- block_custom.js ← 当然ない
- css ← 当然ない
functions.phpの編集
まずテーマのルートディレクトリにあるfunctions.phpから編集していきます。
functions.phpでは、リストブロックにツリー構造スタイルを追加するためのcss、javascriptを読み込むための処理を書きます。
WordPressのダッシュボードから[外観]-[テーマファイルエディター]を開きます。
右の[テーマファイル]から[Theme Functions]をクリックします。
デフォルトではこのようになっているはずです。
<?php //子テーマ用関数
if ( !defined( 'ABSPATH' ) ) exit;
//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();
//以下に子テーマ用の関数を書く[//以下に子テーマ用の関数を書く]の下に追記します。
<?php //子テーマ用関数
if ( !defined( 'ABSPATH' ) ) exit;
//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();
//以下に子テーマ用の関数を書く
function add_my_assets_to_block_editor() {
wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/blocks/css/block_style.css');
wp_enqueue_script( 'block-custom', get_stylesheet_directory_uri() . '/blocks/js/block_custom.js', array('wp-blocks'), "", true);
}
add_action( 'enqueue_block_assets', 'add_my_assets_to_block_editor' );[add_my_assets_to_block_editor]の部分は関数名なので好きな名前にしてもいいです。
[wp_enqueue_style]で読み込むcssを指定しています。読み込むcssは記事の後ろで作ります。
[wp_enqueue_script]で読み込むjavascriptを指定しています。読み込むjavascriptは記事の後ろで作ります。
[add_action]で何らかのフックに対してアクションを追加しています。ここでは ‘enqueue_block_assets’ がフックで、’add_my_assets_to_block_editor'(自作の関数) がアクションです。
blocksディレクトリの作成
WordPressから新規作成はできなさそうだったのでFTPで作成しました。
ここではロリポップを使っています。管理インターフェイスに入りFTPを起動します。どこのレンタルサーバーでも、自前のサーバーでも、何かしらあるはずなので置き換えて読んでください。
FTPを起動したら /wp-content/themes まで辿っていき、自分の使っている現在のテーマのディレクトリを開きます。cocoonを使っていればcocoon-child-masterです。
テーマのディレクトリまで来たらblocksディレクトリ、cssディレクトリ、jsディレクトリを作ります。
ロリポップの場合は上の画像のフォルダアイコンをクリックすると作れます。
- /
- wp-content
- themes
- cocoon-child-master
- block
- css
- js
- block
- cocoon-child-master
- themes
- wp-content
block_style.cssの作成
作成したcssディレクトリ配下にblock_style.cssを作成します。
ロリポップではファイルアイコンをクリックすると作れます。
block_style.cssの中身は次のとおりです。
/*ツリー構成図リストスタイル*/
.is-style-tree {
list-style-type: none;
display:block;
position:relative;
background-color:#f7f7f7;
padding:30px;
font-size:12px;
}
.is-style-tree li {
line-height: 21px;
margin: 0 !important;
}
.is-style-tree ul {
display:block;
position:relative;
padding:0;
padding-left:21px;
padding-inline-start: 21px;
margin: 0;
margin-bottom: 10px !important;
}
.is-style-tree ul:before {
content:"";
position:absolute;
top:-2px;
bottom:0;
left:-20px;
width:0;
border-left: 1px solid gray;
margin-left:24px;
}
.is-style-tree ul li {
display:block;
position: relative;
}
.is-style-tree ul li:before {
content: "";
position: absolute;
top: 10px;
bottom: 0;
left: -17px;
width: 14px;
height: 0;
border-top: 1px solid gray;
}
.is-style-tree ul li:last-child:before {
height: auto;
background-color: #f7f7f7;
}block_custom.jsの作成
block_style.cssと同様に、作成したjsディレクトリに移動しblock_custom.jsを作成します。
block_custom.jsの中身は次のとおりです。
wp.blocks.registerBlockStyle(
'core/list',
{
'name': 'tree',
'label': 'ツリー構造',
}
)wp.blocks.registerBlockStyleでブロックに対してスタイルを追加しています。
動作確認
リストを作成し、リストブロックのメニューアイコンをクリックします。
[スタイル] – [ツリー構造]を選択します。
ブロックエディター画面だと歪な感じに見えますが、投稿すると綺麗なツリーとして表示されます。
おまけ
ブロックエディター画面でしかツリー表示にならない場合
フックに ‘enqueue_block_editor_assets’ と記載した場合、ブロックエディター画面ではツリー表示に見えるものの、プレビューや投稿画面からでは普通のリストに見えます。
add_action( 'enqueue_block_editor_assets', 'add_my_assets_to_block_editor' );背景色や文字サイズを修正したい
block_style.cssとblock_custom.jsは、ファイルさえ作ってしまえばWordpressのテーマファイルエディターから触れるので、そちらから修正すると楽です。
参考
コメント