基本情報技術者試験の過去問演習本が本日発売開始となります。
このブログに移ってから、こうした新刊のお知らせを出すのは初めてのことです。できれば単発記事だけではなく、しばらくの間ずっと目に付くところへ載せておきたいものですが、このサイトにはまだそういう場所がありません。
前のサイトではそうした新刊告知スペースを設けてあったんですけどね。なんせ今のサイトは著作リストもまだ載せてないぐらいだし。
使用中のWordPressテーマであるCocoonの機能をチェックすると、一応そういう用途に使えそうな「アピールエリア」という機能がありました。ヘッダー画像の下にアピールしたいお知らせを出すことができるんですね。こんな感じに。
うん、でかい。
”よく読まれている記事リスト”として使っているカルーセルを取っ払えば載せておけなくはないものの、それではトップページにしか掲示しておけません。さすがに個別の記事ページまでこれで場所を取らせるのは明らかに邪魔すぎる。
なにかこう…ヘッダー画像なんかは本来機能的になくても全然困らないものなんだから、そこを使ってうまくやれないものかな。
こんな風に。
というわけで、「ヘッダー画像内に告知スペースを設けるぞカスタマイズ」を試みることにしました。
ヘッダー画像部分のコードを確認したら、フック関数がありました
毎度のことながら、まずは親テーマのソースコードを読み進めていってカスタマイズ範囲を探ります。ヘッダー画像やタイトルロゴを表示する処理はどうやらtmp/header-container.phpで行われている様子。tmp配下なら子テーマにコピペで持ってきてカスタマイズできるから、どうなりと処理できそうです。
ただ、その必要すらありませんでした。ヘッダーエリアの一連の処理を見ていったら、タイトルの下にスペースを入れたい人用にフック関数の口が設けられていたのです。
<?php //ロゴ後にコードを挿入するためのアクションフックdo_action( 'wp_header_logo_after_open' ); ?>
じゃあ話は簡単。子テーマのfunctions.phpにこの関数を足してやって、お知らせスペース用のコードを吐くようにしてあげれば良いわけですね。
フック関数については、こちらの記事の時にお勉強したので、話は簡単なのです。
お知らせスペース用のウィジェットを作成する
functions.phpに関数を設けて、そこで告知内容を直接書き込んでも良いわけですが、このお知らせスペースについては今後も多分活用することになるはずです。その度にfunctions.phpを直接書き換えるというのはあまり美しくありません。
そう思っていたら、同じようなカスタマイズをしている方の参考になるブログが見つかりました。
Cocoonで(というかWordPressで…かな)サイドバーや投稿画面などの構成をいじりたい時は、該当スペースにウィジェットを並べて、表示内容をカスタマイズするのが一般的です。ウィジェットには、たとえばプロフィールを表示するためのものや、カテゴリーの一覧を表示するためのものなど、様々なものが用意されていて、それをドラッグ＆ドロップするだけで「ページのここにこれを表示」と指示できちゃうわけですね。
このウィジェットには、「カスタムHTML」というのも用意されています。それを使えば何なりと好きなコードを指定箇所に埋め込んでやることができるウィジェットです。
つまり、ヘッダー画像部分にお知らせスペース用のウィジェットエリアを作って、そこにウィジェットを置けるようにしてあげれば、今後の告知はウィジェット管理画面上でちょちょいと書き換えたり、表示非表示を切り替えるだけで済むようになります。
それは素晴らしいってことで、上記のブログを参考にして、以下のコードをfunctions.phpに追加しました。
// アナウンス枠エリアウィジェット
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'ヘッダー領域追加コンテンツ',
'id' => 'add-header-contents',
'description' => 'ヘッダー領域に追加コンテンツを表示するウィジェットです。',
'before_widget' => '<div class="add-header-contents">',
'after_widget' => '</div>',
));
}ウィジェットエリアに設定した内容を出力するのは、先ほど見つけたフック関数を用います。これも同じくfunctions.phpに次のように追記しておきます。
// ヘッダーロゴの下に出力をする
add_filter('wp_header_logo_after_open', 'add_header_contents');
function add_header_contents() {
dynamic_sidebar('add-header-contents');
}WordPressの管理画面でウィジェットの設定を行う
ここまで完了したら、最後は実際に表示させたい内容をHTMLコードとしてウィジェットに設定してやるだけです。管理画面の [外観]→[ウィジェット] を開くと先ほどfunctions.phpで追加したウィジェットエリアが出来ているはずなので、その中にカスタムHTMLウィジェットを登録します。
中身はお好みのままに。ちなみにうちの場合は、このコードをCSSで整形して、あとスマホサイズの場合はちょっと表示を切り替えるレスポンシブ対応を行うようにしています。あ、あとAMPページでは表示させていません。AMPのCSSサイズ制限を超えてしまってレイアウトを整えようがないので、表示を乱す要素は基本的に非表示とするほかないのです。
こうして出来上がったのが、今ヘッダー画像の上に載っかっているお知らせスペース。
今後は新刊の告知だけじゃなくて、イベントや求人の告知なんかにも使えそうだと思っています。ウィジェットエリアにしたから、表示するか否かはチェックボックスで指定するだけ。用途のパターンごとに複数のカスタムHTMLウィジェットを登録しておいて、必要に応じて中身を小変更して切り替えるという使い方をするのも良さそうです。
コメント