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>
グローバルメニューの挙動について
グローバルメニュー内で、現在表示中のページと同じリンク（例：https://example/#access）をクリックすると、.global-nav__menu で is-open クラスがトグルされる。
<ul id="global-nav__menu" class="global-nav__menu is-open">
<!-- クリックするたび切り替わる -->
<ul id="global-nav__menu" class="global-nav__menu">そのため、ドロワーメニューが開かれた時のスタイルをこのis-openで指定している場合は 、意図せずスタイルが変化する可能性があるため注意が必要。
/* メニューが開かれていないのに色が変わる恐れがある */
.global-nav__menu.is-open a {
color: tomato;
}ドロワーメニューを開いた時のスタイルを指定する場合は、button要素側のis-opneクラスで指定する必要がある。
.global-nav__toggle.is-open+.global-nav {
/* メニューが開かれた時のスタイル */
}必要に応じてメディアクエリも併用するとなお安心だが、「ドロワーメニュー開始サイズ(px)」で指定されたブレイクポイントは、max-width ベースで適用されている点に注意が必要。
1200を入力→@media (max-width: 1200px)
投稿アーカイブ（home）にもページタイトルを出力
文字列のみを出力する場合
// 投稿アーカイブページにページタイトルを出力
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;
}
.blog .archive__main {
padding-top: 0;
}
@media not (max-width: 599px) {
.blog .archive__main {
padding-inline: 0;
}
}
.blog .archive__container {
padding-top: 4em;
}ただし、アーカイブページは「ヘッダーオーバーレイ（ヘッダーの透明化）」の設定ができないため、固定ページで有効化している場合は、トンマナが揃わなくなる点にだけ注意。
おまけ：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制作の現場では嬉しいポイントですね。
おすすめWEBスクール
WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。
＼ クリックしてジャンプ！ ／
お気軽にコメントどうぞ