ランディングページ製作時の覚書 テンプレートとアイキャッチ画像について
テーマ：ビズベクトル
固定ページテンプレート：結局のところ「no_sidebar」
問題点：
当初Landing_Pageテンプレートで、作成していた。
ビズベクトルの仕様で、固定ページには「アイキャッチ画像」が表示されないため、
一行目にトップ画像を配置したが、上に余白ができてしまい見栄えが悪い。
なんとか余白を消せないか？ → アイキャッチを使えばなんとかなるのでは？
しかし、固定ページには「アイキャッチ画像」が表示されない。
functions.php に、ビズベクトルの持つフィルターフックを使い、固定ページにもアイキャッチが表示されるように設定した！
詳細はここ
しかし、Landing_Pageテンプレートではヘッダーが非表示の設定になっているため、そもそもアイキャッチは表示されない。。。
lp_template.php を作るよりは、cssやfunctions.php で操作したほうがいいか。。。
結局、テンプレートを no_sidebar に切り替えた。
しかし、no_sidebarテンプレートでは、ページタイトルとヘッダーロゴ、パンクズリストが表示されてしまう。
そのため、ページタイトルとヘッダーロゴは CSS で非表示とした。
functions.php に追加した関数は、以下の通り。
(phpコードは、本サイト上では正常に表示されないため、参考にするときは設計で見る事）
function my_bizvektor_pageTitHtml($pageTitHtml) {
if (!is_page(1410)) return $pageTitHtml; // ページid-1410以外では何もしない
// スマホかつアイキャッチ画像があればミディアムサイズで画像を表示
if (ua_smt() == true and has_post_thumbnail() == true ) {
$temp = get_the_post_thumbnail($post->id, array( 370, 163 ) );
}
// PCかつアイキャッチ画像があれば指定サイズで画像を表示
if (ua_smt() == false and has_post_thumbnail() == true ) {
$temp = get_the_post_thumbnail($post->id, array( 1024, 452 ) );
}
// アイキャッチ画像のブロックにidを付加
$temp = sprintf('
', $temp);
return $temp . $pageTitHtml;
}
add_filter( 'bizvektor_pageTitHtml', 'my_bizvektor_pageTitHtml');
以上、思いの外 時間がかかってしまったLPの画像表示修正でした。
このphpのお手本にしたページ
BizVektorの固定ページタイトルの上にアイキャッチ画像を表示する