デイトラweb制作上級編 DAY21~22
nakano
WordPressでショートコードを自作する【Gutenberg対応】
編集画面
プレビュー画面
※ショートコードを使うと、記事で定型文やお問い合わせボタンを使い回せるため時短につながる
ショートコードの使い方
1. ショートコード用のPHPを記述
→ functions.php
2. エディタでショートコードを利用
→ 編集画面
3. 再利用ブロックに追加（使い回すため）
→ 編集画面
投稿の最下部にお問い合わせボタンを追加
手順
1. ショートコード用のPHPを記述（済）
2. single.phpにショートコードを記述
本文とページネーションの間に記述
single.php
<?php echo do_shortcode('[btn link="http://localhost:8888/dev/お問い合わせボタンのテスト/"]お問い合わせはこちら[/btn]'); ?>
これだと↑のように1ページ目の最後にも表示されてしまうため
functions.php
// 投稿ページの分割ページの最後に置く
function is_post_page_end() {
global $numpages;
$paged = (get_query_var('page')) ? get_query_var('page') : 1;
return $paged == $numpages;
}single.php
<?php if ( is_post_page_end() ) : ?>
<?php echo do_shortcode('[btn link="http://localhost:8888/dev/お問い合わせボタンのテスト/"]お問い合わせはこちら[/btn]'); ?>
<?php endif; ?>に変えてページの最後にだけボタンを配置する
コードをハイライト表示にする
highlight.js を使用
highlight.js は HTML にソースコードを表示するとき、キーワードなどを強調表示するための JavaScript ライブラリです。
コードのハイライト表示用 JS ライブラリ highlight.js の使い方
※技術系のブログにコードを載せるときなどに利用
参考記事
・jQuery不要の軽量コードハイライト！「highlight.js」の解説
↑と合わせて
・課題の内容をそもそも理解できません（notion）
編集画面
プレビュー画面
※pタグやbrタグが勝手に入ってしまうため基本的には「コードブロック」を使う
（またはプラグイン「Highlighting Code Block」）
まとめ
今回はショートコードを自作しました。
演習課題1まではスムーズにできたのですが、演習課題2で躓いてslackを見たり、いろいろな記事を調べたりしてなんとかできました。
notionによれば「ショートコードと再利用ブロックに慣れるための課題」のようなので、いったんここまでにして次の課題に進みたいと思います！
