「WordPressユーザーのためのPHP入門 はじめから、ていねいに。」で解説しているように、グーテンベルクではブロックを初期配置できます。 この機能を使って、いくつかのブロックを初期配置してみます。
この機能を使うと、投稿のひな形を自動生成できるので、ブログ執筆効率が向上します。読まれやすいテンプレート・商品が売れやすいテンプレートなど、自分の勝ちパターンを登録しておくのがお勧めです。 複数人で運営するときに、フォーマットを統一したりするのにも便利です。
ブロックを初期配置するコード
書籍第4版p242~(第3版p229~)で解説しているように、ブロックテンプレート機能を使うと、ブロックを初期配置することが可能です。 この機能を使って、
- 「こんな人におススメ」見出し
- 「吹き出し」メディアと文章
- 「アマゾンで購入する」ボタン
を初期配置してみます。
function newpost_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/heading', array(
'level' => '3',
'content' => 'こんな人におススメ'
)),
array( 'core/media-text', array(
'mediaType' => 'image',
'mediaUrl' => 'https://calculator.jp/images/man.png',
'className' => 'speech-balloon'
)),
array( 'core/button', array(
'text' => 'アマゾンで購入する'
)),
);
}
add_action( 'init', 'newpost_template' );
設定方法
まず、グーテンベルクのブロック一覧で、初期配置したいブロックのスラッグを確認します。 上の例では、見出しがcore/heading、メディアと文章がcore/media-text、ボタンがcore/button、となっています。
次に、ブロック毎の初期データを設定します。書籍執筆時点ではドキュメントが整備されていないようなので、wp-includes/js/dist/block-library.jsを読む必要があります。
block-libarry.js に、var heading_name = 'core/heading';
という行があります。この近辺のコードを読むと、
var schema = {
content: {
type: 'string',
source: 'html',
selector: 'h1,h2,h3,h4,h5,h6',
default: ''
},
level: {
type: 'number',
default: 2
},
align: {
type: 'string'
},
placeholder: {
type: 'string'
}
};
var heading_name = 'core/heading';
という記述があります。schemaの中の、content, level, align, placeholderが、ブロックテンプレートで設定可能な初期データです。 上の例では、level(見出しのHタグを指定する)とcontent(見出しのテキスト)を指定しています。
他のブロックを初期配置する場合も、同様にblock-library.jsを読んでいくと、設定可能な初期データが記載されています。
スタイルシート
「メディアと文章」ブロックを、吹き出し表示にするために、スタイルシートを編集します。
この「メディアと文章」ブロックには、初期データで 'className' => 'speech-balloon'
と書いておいたので、speech-balloonというcssクラスが付与されます。
このcssクラスにスタイルを追加すると、吹き出しが作成できます。
なお、CSSはCSSで作る!吹き出しデザインのサンプル19選を元にしています。
ブログ表示用 style.cs
ブログで投稿を表示するときに使用するスタイルシートはstyle.cssです。ここに、以下を追記します。
.speech-balloon {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
grid-template-columns: 50px auto;
}
.speech-balloon .wp-block-media-text__media {
float: left;
margin-right: -90px;
width: 80px;
}
.speech-balloon .wp-block-media-text__media img{
width: 100%;
height: auto;
border: solid 3px #d7ebfe;
border-radius: 50%;
}
.speech-balloon .wp-block-media-text__content {
width: 100%;
}
.wp-block-media-text__content p {
display: inline-block;
position: relative;
margin: 5px 0 0 105px;
padding: 17px 13px;
border-radius: 12px;
background: #d7ebfe;
}
.wp-block-media-text__content p:after {
content: "";
display: inline-block;
position: absolute;
top: 18px;
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #d7ebfe;
}
.wp-block-media-text__content p {
margin: 0;
padding: 0;
}
管理画面用 style-editor.css
管理画面(投稿編集画面)でも、見た目を吹き出しにしたい場合は、スタイルシートstyle-editor.cssを編集します。
.speech-balloon {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
grid-template-columns: 50px auto;
}
.speech-balloon .block-library-media-text__media-container {
float: left;
margin-right: -90px;
width: 80px;
height: 80px;
}
.speech-balloon img{
width: 100%;
height: auto;
border: solid 3px #d7ebfe;
border-radius: 50%;
}
.speech-balloon .wp-block-media-text__content {
width: 100%;
}
.speech-balloon .components-autocomplete p:nth-child(2) {
display:none;
}
.speech-balloon p {
display: inline-block;
position: relative;
margin: 5px 0 0 55px;
padding: 17px 13px;
border-radius: 12px;
background: #d7ebfe;
}
.speech-balloon p:after {
content: "";
display: inline-block;
position: absolute;
top: 18px;
left: -24px;
height: 20px;
border: 12px solid transparent;
border-right: 12px solid #d7ebfe;
}
.speech-balloon p {
margin: 0;
padding: 0;
}
標準ブロック+スタイルシートで設定するメリット
上の例では、吹き出し機能を標準ブロック(メディアと文章)+スタイルシートで設定しました。
吹き出し機能を独自ブロックで作成しているテーマ・プラグインもあります。この場合は、上で作った例よりも柔軟に設定できることが多いです。 たとえば「吹き出しの形や背景色をブロックエディタで設定できる」といった感じです。
しかし、独自ブロックで作成しているテーマ・プラグインの場合、別のテーマ・プラグインへ切り替えるときに手間がかかることがあります。 独自ブロックで作成しているテーマ・プラグインを使う場合は、この点も確認しておきましょう。
応用例: 画像をアバターURLにする
↑のコードでは、メディアと文章に入れる画像が固定でしたが、WordPressの関数を使って決めることも可能です。
↓では、現在ログインしているユーザーのアバターURLを取得して、その画像を初期配置します。
// アバターを取得する関数
function ounziw_get_userimg() {
$userimg = '';
$current_user = wp_get_current_user(); // 現在のユーザーを取得する
if ( is_object( $current_user ) ) {
$args = array( 'size' => 150 );
$args = apply_filters( 'ounziw_get_userimg_args', $args );
$userimg = get_avatar_url( $current_user->ID, $args );
}
return $userimg;
}
function newpost_template() {
$mediaUrl = ounziw_get_userimg();
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/heading', array(
'level' => '3',
'content' => 'こんな人におススメ'
)),
array( 'core/media-text', array(
'mediaType' => 'image',
'mediaUrl' => $mediaUrl,
'className' => 'speech-balloon'
)),
array( 'core/button', array(
'text' => 'アマゾンで購入する'
)),
);
}
add_action( 'init', 'newpost_template' );
複数のユーザーで寄稿するウェブメディアなどでは、こういったユーザーによって異なるデータを初期配置しておくと便利になりますね。
更新日: