WordPressテーマ「yStandard」カスタマイズ備忘録
WordPressの無料テーマ「ySatandard」を編集するときのメモ書きを残しておきます。
ドロワーメニューボタン横に電話ボタン追加
// ヘッダーに電話ボタン追加
function header_add_btn() {
echo '<a href="tel:08012345678" class="tel-button">' . do_shortcode('[ys_icon name="phone"]') . '</a>';
}
add_action( 'get_template_part_template-parts/header/global-nav', 'header_add_btn' );必要に応じてCSSでカスタマイズ。
全幅指定
/* 全幅 */
.full-width {
width: calc(100vw - var(--scrollbar-width));
margin-left: calc(50% - 50vw + var(--scrollbar-width) / 2);
max-width: none;
}全幅が必要な要素に上記クラスを追加。
スライダーのページネーションを外側に
.swiper :is(.swiper-button-next, .swiper-button-prev) {
width: auto;
height: auto;
transform: translateY(calc(-50% - 20px));
margin-top: 0;
}
.swiper-wrapper {
margin-bottom: 40px;
}スライダーブロック（yStandard Toolbox）のページネーションを下側にはみ出させたい時に指定。
ナビボタンは「margin-bottomの半分」を指定して上に戻している。
Googleマップの埋め込み
Googleマップをカスタムサイズで埋め込むと自動で4:3になるので、iframeタグにdata-aspect-ratio属性を追加する。
<iframe data-aspect-ratio="none">
</iframe>
投稿アーカイブ（home）にもページタイトルを出力
文字列のみを出力する場合
<?php // 以下をコピペ
// 投稿アーカイブページにページタイトルを出力
function archive_header_home() {
if ( is_home() ) {
?>
<header class="archive__header page-header">
<?php the_archive_title('<h1 class="archive__page-title page-title">', '</h1>'); ?>
</header>
<?php
}
}
add_action('ys_site_main_prepend', 'archive_header_home');投稿アーカイブページではページタイトルは出力されない仕様になっている。
カテゴリーやタグなどのアーカイブページと同じように、ページタイトルを出力したい場合に記述する。
任意のブロックを出力する場合
同じようなアプローチで、背景付きのタイトルなど任意のブロックを出力することもできる。
あらかじめ「[ys]パーツ」でページヘッダーを作成しておき、ショートコードで出力する。
// 投稿アーカイブページにページヘッダーを出力
function archive_header_home() {
if ( is_home() ) {
echo do_shortcode('[ys_parts parts_id="4143"]');
}
}
add_action('ys_site_main_prepend', 'archive_header_home');ページヘッダー周りの余白をCSSで調整。
/* 投稿アーカイブのページヘッダー */
.blog .site-content {
margin-top: 0;
.archive__container {
margin-top: 4em;
}
/* 見出しブロックを使用した場合の余白調整 */
.ystdb-section :where(h1, h2) {
margin-bottom: .25em;
}
}ただし、アーカイブページは「ヘッダーオーバーレイ（ヘッダーの透明化）」の設定ができないため、固定ページで有効化している場合は、トンマナが揃わなくなる点にだけ注意。
おまけ：H1タグをdivに変更する
// 投稿アーカイブページのh1をdivに変更
add_action('template_redirect', function() {
if (!is_home()) return;
ob_start(function($buffer) {
return preg_replace(
'/<h1 class="site-title">(.*?)<\/h1>/s',
'<div class="site-title">$1</div>',
$buffer
);
});
});独自のページタイトルをH1で出力した場合、投稿アーカイブページで使われているH1とで被ってしまう。
HTML構造的にもSEO的にもH1タグはいくつあっても問題ないが、気になる場合は元のH1タグをdivタグに書き換えてあげれば良い。
まとめ：yStandardはカスタムしやすい
yStandardはカスタマイズを前提に設計されたテーマで、ある程度の知識は必要ですが、その分親切で使いやすい設計になっています。
完全無料でアップデートできる点もWeb制作の現場では嬉しいポイントですね。
カスタマイズに困ったらお気軽にご相談を！
- 「ちょっとしたCSSの調整だけお願いしたい」
- 「不具合を直してほしい」
料金は3,000円〜、お支払いはPayPay・Amazonギフトカードなど柔軟に対応してます🤔
お気軽にコメントどうぞ