「今どきクラシックテーマなんか使ってるの？時代はブロックテーマだよ」みたいなツイートを目にして、そもそもwordpressのテーマがクラシックとブロックで区別されてるなんて知らんかったのに焦りを覚えた私は、さっそく「ブロックテーマ 作成」で検索して公式サイトのチュートリアルを見ながら自分のブログのブロックテーマを作ることにした。
ブログの条件
自分のブログ149は単純な作りである。
トップページに最新記事を1件表示し、next_posts_linkで以前の記事へリンクする。
ヘッダーにタイトルとキャッチフレーズ、SNSへのリンクを配置し、フッターにはコピーライトを記載。
以上である。シンプル。
なので必要なテンプレートはindex.html、singular.html、404.htmlの3ファイルがあればいい。
テーマ作成
最初はチュートリアル通り進めたけど上手くいかず。公式サイトのチュートリアルにあるテーマの例から「基本的なスターターテーマ『emptytheme』」をダウンロードし、カスタムしていくことにした。
emptythemeフォルダを/wp-content/themes/にアップロードしてテーマ適用。この辺は今まで通りの手順。
ダッシュボード＞外観＞エディタから編集開始。
ブロックをぽいぽい追加していく。グループを駆使してレイアウトを決めていく。この辺りは色んなブログなどを参考にスイスイいけたので割愛する。
なので以下はつまずいた箇所を書き出していく。
index.html
ページ送り
クエリループの中、投稿テンプレートの外にブロックを挿入する。この位置関係がわかるまで検索しまくった。
設定＞テンプレートからクエリーを継承
index.htmlではこれをオンにする。
オンにしないとページ送りのリンク先でタイトルがどのページでも同一になってしまった。
singular.html
本文部分にクエリループは使用しない
投稿タイトルブロックと投稿コンテンツブロックを直接配置すればOK。
クエリループを使ったら前の投稿リンク、次の投稿リンク先で本文がどのページでも同一になった。
functions.php
emptythemeテーマのfunctions.phpですでにstyle.cssの読み込みは記述されているので、
「WordPressテックラボ functions.phpでJSやCSSを一元管理する」を参考にしてJSファイルも読み込む。
さらにhead内にGA4とOGPを設置するため「とくしよネット WordPressでOGP,Twitterカードの設定（プラグイン無し）」を参考にfunctions.phpへ以下を記述。
// head内に挿入したいタグ処理
function add_ga4() {
echo '<!-- Global site tag (gtag.js) - Google Analytics -->' . "\n";
echo '<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxx"></script>' . "\n";
echo '<script>' . "\n";
echo ' window.dataLayer = window.dataLayer || [];' . "\n";
echo ' function gtag(){dataLayer.push(arguments);}' . "\n";
echo ' gtag("js", new Date());' . "\n";
echo ' gtag("config", "G-xxxxxxxx");' . "\n";
echo '</script>' . "\n";
}
add_action('wp_head', 'add_ga4');
function my_ogp() {
if( is_front_page() || is_home() || is_singular() ){
global $post;
$og_site_name = get_bloginfo('name');
$og_title = '';
$og_description = '';
$og_url = '';
$og_image = get_template_directory_uri() . '/img/ogp.png';
$html = '';
//記事＆固定ページ
if( is_singular() ) {
setup_postdata($post);
$og_title = $post->post_title;
$og_description = mb_substr(get_the_excerpt(), 0, 100);
$og_url = get_permalink();
$og_type ='article';
}
//トップページ
if ( is_front_page() || is_home() ) {
$og_title = get_bloginfo('name');
$og_description = get_bloginfo('description');
$og_url = home_url();
$og_image = get_template_directory_uri() . '/img/ogp.png';
$og_type ='website';
}
//OGPタグの出力
$html .= '<meta property="og:title" content="'.esc_attr($og_title).'" />' . "\n";
$html .= '<meta property="og:description" content="'.esc_attr($og_description).'" />' . "\n";
$html .= '<meta property="og:type" content="'.$og_type.'" />' . "\n";
$html .= '<meta property="og:url" content="'.esc_url($og_url).'" />' . "\n";
$html .= '<meta property="og:image" content="'.esc_url($og_image).'" />' . "\n";
$html .= '<meta property="og:site_name" content="'.esc_attr($og_site_name).'" />' . "\n";
$html .= '<meta property="og:locale" content="ja_JP" />' . "\n";
$html .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
echo $html;
}
}
add_action('wp_head','my_ogp');
また、ファビコンを設定するためカスタマイザーをメニューに表示させるコードも記述。
add_action( 'customize_register', '__return_true' );
書き出し
一通りエディタでの設定が終わったらビジュアルエディタからコードエディタに切り替え、index.html、singular.html、404.htmlとpartsフォルダのheader.html、footer.htmlをそれぞれファイルにコピペする。
以上です。