SWELL│コピーライト上にコンテンツを表示するカスタマイズ

SWELLのフックとCSSを使うと、フッターのコピーライト上にブログパーツを表示できます。

この方法は、コピーライトがリンクを含まない標準フッターを対象としています。

サンプル

ブログパーツの用意、PHPとCSSの追加、表示の確認を順に説明します。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELLでコピーライト上にコンテンツを表示するカスタマイズ

PHPでブログパーツを出力し、CSSで表示順を指定します。

swell_after_copyrightフックの出力位置は、HTML上ではコピーライトの後です。

ブログパーツの用意

今回は会社名や住所等の情報を掲載する想定です。

以下のようなブログパーツを用意しました。

余談ですが、ブロックで文字の間隔等も設定することができます。

PHPコードの追加

子テーマのfunctions.phpのPHP内、またはCode SnippetsのPHPスニペットの一方に追加します。

親テーマには追加せず、既存のPHP開始タグも重ねません。

変更前にバックアップを保存してください。

ブログパーツは公開済みにし、64をそのIDへ変更します。

未公開・別の投稿タイプ・存在しないIDの場合は何も出力しない構成です。

同じコードを二重登録しないでください。

※idは適宜変更

add_action('swell_after_copyright', function () {
    $part_id = 64; // 公開済みブログパーツのIDに変更
    if (!shortcode_exists('blog_parts')) return;
    $part = get_post($part_id);
    if (!$part || $part->post_type !== 'blog_parts' || $part->post_status !== 'publish') return;
    echo '<div class="waza-copyright-info">';
    echo do_shortcode('[blog_parts id="' . absint($part_id) . '"]');
    echo '</div>';
});

CSSの追加

このフックはHTML上ではコピーライトの後に出力します。

以下を追加CSSか子テーマのstyle.cssに貼ると、見た目だけをコピーライトの前へ移せます。

DOMの読み上げ順・Tab順は変わらないため、住所などの短い静的な情報向けです。

フォームや多数のリンクを含む場合は、フッターウィジェットなど、元から目的の順番で出力できる場所を使ってください。

.l-footer__foot > .l-container {
    display: flex;
    flex-direction: column;
}
.l-footer__foot > .l-container > .waza-copyright-info { order: 1; }
.l-footer__foot > .l-container > .copyright { order: 2; }

確認

最後に確認してみましょう。

公開ページで、本文が重複しないこと、PCとスマホ幅で横にはみ出さないこと、フッターメニューが残ることを確認してください。

以下は、後述する枠内見本をスマートフォン幅で表示した画像です。

表示順を確認できる見本

次はSWELL 2.19.0のフッターテンプレートと、上記PHPでブログパーツを出力したHTMLの見本です。

本文のCSSをこの枠内だけに適用しています。

見本のブログパーツ内のリンクにTabキーで移動できます。

画面ではブログパーツがコピーライトの上に並びますが、HTMLではコピーライトの後にあります。

CSSのorderは読み上げ順やTab順を変更しません。

リンクを含むコピーライトを使う場合は表示順と操作順が食い違うため、この並べ替え方法を使わず、テンプレート上で出力順を揃えてください。

この記事の見本のコピーライトはリンクを含まない文字列です。

まとめ

ブログパーツをコピーライト上に表示する場合は、掲載PHPとCSSを組み合わせて使います。

CSSで見た目の順番を変えても、HTMLの読み上げ順やTab順は変わらない点に注意してください。

旧GitHub例は今回のコードと同期していません。

本文のコードを使用してください。

以前の例はGitHubのMOTOKI-LLC/WAZA-codeにもまとめています。

元に戻すにはPHPスニペットを停止し、今回追加したCSSを削除します。

ブログパーツ自体は削除不要です。

SWELL 2.19.0のフッターテンプレートでフック位置を確認しましたが、独自フッターやLPなど標準フッターを使わないページには適用されない場合があります。

よくある質問：SWELLでコピーライトの上にコンテンツを表示するとき

この方法は、どんなフッターが対象ですか？

記事では、コピーライトがリンクを含まない標準フッターを対象としています。SWELL 2.19.0のフッターテンプレートでフック位置を確認していますが、独自フッターやLPなど標準フッターを使わないページには適用されない場合があります。

どうやってコピーライトの上にコンテンツを表示しますか？

記事では、PHPでブログパーツを出力し、CSSで表示順を指定します。swell_after_copyrightフックの出力位置は、HTML上ではコピーライトの後です。ブログパーツの用意、PHPとCSSの追加、表示の確認の順に進めます。

PHPコードは、どこに追加しますか？

記事では、子テーマのfunctions.phpのPHP内、またはCode SnippetsのPHPスニペットの一方に追加します。親テーマには追加せず、既存のPHP開始タグも重ねません。変更前にバックアップを保存し、同じコードを二重登録しないでください。

ブログパーツのIDは、どう指定しますか？

記事では、ブログパーツは公開済みにし、コード内の64をそのIDへ変更します。未公開・別の投稿タイプ・存在しないIDの場合は、何も出力しない構成です。

CSSで順番を変えると、読み上げ順やTab順も変わりますか？

変わりません。記事では、CSSのorderは読み上げ順やTab順を変更せず、画面ではブログパーツがコピーライトの上に並んでも、HTMLではコピーライトの後にあると説明しています。

どんな内容のブログパーツに向いていますか？

記事では、DOMの読み上げ順・Tab順は変わらないため、住所などの短い静的な情報向けです。フォームや多数のリンクを含む場合は、フッターウィジェットなど、元から目的の順番で出力できる場所を使うよう案内しています。

コピーライトにリンクが含まれている場合は、どうしますか？

記事では、リンクを含むコピーライトを使う場合は表示順と操作順が食い違うため、この並べ替え方法を使わず、テンプレート上で出力順を揃えてくださいとしています。

元に戻すには、どうしますか？

記事では、PHPスニペットを停止し、今回追加したCSSを削除します。ブログパーツ自体は削除不要です。公開ページでは、本文が重複しないこと、PCとスマホ幅で横にはみ出さないことなどを確認します。