Exclusive
WordPress REST API を使ってレーダーチャートを作ってみた WordPress REST API を使ってレーダーチャートを作ってみた コミュニティリーダーズサミット in 高知「2022初鰹編」(#CLS高知)へ参加して来ました！ 【希少！】A/C ファンモーターブラシスプリングリペア済み！ (Golf Mk1 Cabriolet 1990 ~ 1993) 【希少！】A/C ファンモーターブラシスプリングリペア済み！ (Golf Mk1 Cabriolet 1990 ~ 1993)
WordPress REST API を使ってレーダーチャートを作ってみた WordPress REST API を使ってレーダーチャートを作ってみた コミュニティリーダーズサミット in 高知「2022初鰹編」(#CLS高知)へ参加して来ました！ 【希少！】A/C ファンモーターブラシスプリングリペア済み！ (Golf Mk1 Cabriolet 1990 ~ 1993) 【希少！】A/C ファンモーターブラシスプリングリペア済み！ (Golf Mk1 Cabriolet 1990 ~ 1993)
Advent Calendar WordPress メモ

Snow Monkey テーマカスタマイズをやってみて感じた「ここまで準備してるなんて最高です！」というポイント

By marushuhei / 2021年12月5日

この記事は、Snow Monkey Advent Calendar 2021 の 6 日目の記事です。

ノーコードでもバッチリカスタマイズできる上に、フィルターフックでも柔軟なカスタマイズができる Snow Monkey テーマですが、先日とある案件でやったカスタマイズで感動したお話です。

My Snow Monkey 素敵

Snow Monkey テーマは子テーマカスタマイズより、プラグインからフィルターフックでのカスタマイズが推奨されています。

Snow Monkey のカスタマイズは子テーマよりプラグインがオススメ！プラグインの雛形をダウンロードできるようにしました – WordPress テーマ Snow Monkey

https://snow-monkey.2inc.org/2019/02/04/my-snow-monkey-plugin/

サンプルコードも載っていてすぐにカスタマイズを始めることができて素敵です ✨

<?php
// 実際のページ用の CSS 読み込み
add_action(
'wp_enqueue_scripts',
function() {
wp_enqueue_style(
'my-snow-monkey',
MY_SNOW_MONKEY_URL . '/style.css',
[ Framework\Helper::get_main_style_handle() ],
filemtime( MY_SNOW_MONKEY_PATH . '/style.css' )
);
}
);
view raw load-style-to-snow-monkey.php hosted with ❤ by GitHub

My Snow Monkey に書き込めばすぐ確認できる！

フィルターフックでカスタマイズ！

更に豊富なフィルターフックがあってテンプレートカスタマイズも便利すぎます！

Snow Monkey でテンプレートの内容を書き換えるフィルターフック – WordPress テーマ Snow Monkey

https://snow-monkey.2inc.org/manual/manual-advanced/template-hooks/

フィルターの場所は wp-config.php などへ以下を追加すればチェックできるお手軽さ。

define( 'WP_DEBUG', true );
define( ‘WP_DEBUG’, true ); でテーマ内のフィルターの場所も簡単にわかるようになってる！

キャプチャのフィルターフックなら以下でシェアボタン追加も楽々 😃

<?php
// addtoany ショートコードを追加
add_filter(
'snow_monkey_template_part_render_template-parts/common/page-header',
function ( $html, $name, $vars ) {
$html .= do_shortcode( '[addtoany]' );
return $html;
},
10,
3,
);
view raw add-to-any-to-snow-monkey.php hosted with ❤ by GitHub

エディタ上でもフロントと同じ見た目に

ブロックエディタになったら、エディターもよりフロントと同じ見た目にする必要ありますよね。

<?php
/**
* エディタースタイル読み込み
*/
add_action(
'after_setup_theme',
function() {
add_editor_style( 'some-editor-style.css' );
}
);
view raw add-editor-style-to-snow-monkey-editor.php hosted with ❤ by GitHub

今回は、ブログカードデザインもカスタマイズする必要がありました。

Embed へもフィルターフックできる柔軟さに感動！

ドキュメントにブログカードのフィルター載ってます。

snow_monkey_oembed_blog_card_loading_template https://snow-monkey.2inc.org/manual/manual-advanced/customize-blog-card/

デフォルトだとこんな感じ

今回は以下のようにテンプレートを変更しました。

<?php
/**
* Embed ブログカードをカスタマイズ
* https://snow-monkey.2inc.org/manual/manual-advanced/customize-blog-card/
*/
add_filter(
'snow_monkey_oembed_blog_card_template',
function( $template, $cache ) {
$template = '';
$cache['cached_time'] = 0;
$target = false === strpos( $cache['domain'], $_SERVER['SERVER_NAME'] )
? 'target="_blank"'
: 'target="_self"';
$blog_link = $cache['permalink'];
$blog_thumb = $cache['thumbnail']
? '<img src="' . esc_url( $cache['thumbnail'] ) . '" alt="">'
: '';
$blog_title = $cache['title'];
$blog_excerpt = $cache['description']
? $cache['description']
: '';
$blog_domain = $cache['domain']
? $cache['domain']
: '';
$template .= '<a href="' . esc_html( $blog_link ) . '" ' . $target . '>' . PHP_EOL;
$template .= '<div class="wp-oembed-blog-card__figure">' . PHP_EOL;
$template .= $blog_thumb . PHP_EOL;
$template .= '</div>' . PHP_EOL;
$template .= '<div class="blog-content__wrap">' . PHP_EOL;
$template .= '<h4 class="blog-title">' . esc_html( $blog_title ) . '</h4>' . PHP_EOL;
$template .= '<div class="blog-content">' . esc_html( $blog_excerpt ) . '</div>' . PHP_EOL;
$template .= '<div class="blog-domain">' . esc_attr( $blog_domain ) . '</div>' . PHP_EOL;
$template .= '</div>' . PHP_EOL;
$template .= '</a>' . PHP_EOL;
return $template;
},
10,
2
);
view raw custom-oembed-template.php hosted with ❤ by GitHub

変更後はこんな感じに。

と、ここでエディターもフロントと同様に変更すべきなので、 snow_monkey_oembed_blog_card_block_editor_template フィルターフックを使うところですが、css だけでやってしまいたい。

css 読み込み追加するフィルターないかなぁとテーマ内を検索していると、、、ありました！

inc2734_wp_oembed_blog_card_block_editor_template フィルターフック

/snow-monkey/vendor/inc2734/wp-oembed-blog-card/src/App/View/View.php

$template = apply_filters( 'inc2734_wp_oembed_blog_card_block_editor_template', $template, $url );

いやぁ、素晴らしい ✨

ということで、早速追加。

<?php
/**
* ブロックエディタのoEmbedへcss追加
* wp-content/themes/snow-monkey/vendor/inc2734/wp-oembed-blog-card/src/App/View/View.php
* apply_filters( 'inc2734_wp_oembed_blog_card_block_editor_template', $template, $url );
*/
add_filter(
'inc2734_wp_oembed_blog_card_block_editor_template',
function ( $template, $url ) {
$template .= sprintf(
'<link rel="stylesheet" href="%1$s?ver=%2$s">',
esc_url_raw( MY_SNOW_MONKEY_URL . '/embed/embed-min.css' ),
filemtime( MY_SNOW_MONKEY_PATH . '/embed/embed-min.css' )
);
return $template;
},
11,
2
);
view raw add-embed-style-to-my-snow-monkey.php hosted with ❤ by GitHub

エディタも OK。楽ちんっすね 😄

まとめ

最終的な My Snow Monkey プラグインは以下のような構成になりました。

子テーマではなく、プラグインからサクッとカスタマイズできるなんて最高です！

そして何と言っても今回感動したのは、Embed 周りのカスタマイズ性も柔軟だという点です。ここまで準備してるなんて最高です！

テーマカスタマイザーだけでもいい感じにカスタマイズできる上に、テンプレートカスタマイズも柔軟で Snow Monkey の懐の深さを実感しました。

最近僕はフロントエンドからセールスへと Job Change したのでテーマ構築やカスタマイズをする機会は減ってきていますが、今後も機会あればガシガシ触っていきたいです 😄

それでは明日は Daisuke Yamasaki さんによる、「Snow Monkey 2021で学んだこと振り返り」です。

今後も良い Snow Monkey ライフを！