WordPressのキャッチフレーズ設定にHTMLを入力すると、次の画像のようにコードがそのまま表示される場合があります。
この記事では、SWELLの通常ヘッダーのロゴ直後に、リンク付きの文言を追加する方法を紹介します。
参考
<p class="waza-powered-by">powered by <a href="https://motoki-design.co.jp/">MOTOKI合同会社</a></p>
SWELLでリンク付きのキャッチフレーズを挿入する方法
子テーマのfunctions.phpからフィルターを使い、通常ヘッダーのロゴ直後にリンクを追加します。
親テーマのファイルは上書きしません。
追従ヘッダーには追加しない例です。
コードは以下の通りです。
編集前の子テーマのfunctions.phpをバックアップし、既存PHPの内側へ次のコードを追加します。
同名の関数がすでにある場合は重ねて追加せず、登録箇所を確認してください。
function motoki_add_logo_text($return, $is_fixbar) {
$marker = '<!-- waza-powered-by -->';
if ($is_fixbar || strpos($return, $marker) !== false) return $return;
$url = 'https://motoki-design.co.jp/';
$label = 'MOTOKI合同会社';
return $return . $marker . '<p class="waza-powered-by">powered by <a href="' . esc_url($url) . '">' . esc_html($label) . '</a></p>';
}
add_filter('swell_parts_head_logo', 'motoki_add_logo_text', 10, 2);PHP内の$urlと$labelを自分のURL・名称へ変更します。
下記はHTML表現の参考です。
通常のキャッチフレーズ設定は置き換えないため、既存文言との重複は設定に合わせて調整してください。
<p class="waza-powered-by">powered by <a href="https://motoki-design.co.jp/">MOTOKI合同会社</a></p>必要に応じて次のCSSを追加CSSへ記載します。
長い名称ではスマホのロゴ領域が狭くなるため、折り返しとメニューボタンの重なりを確認します。
.l-header__logo .waza-powered-by { margin:.4em 0 0; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.l-header__logo .waza-powered-by a:focus-visible { outline:2px solid currentColor; outline-offset:2px; }戻す場合は追加した関数・add_filter行と専用CSSを外します。
通常ヘッダーと追従ヘッダー、PC・スマホでロゴとリンクの配置を確認し、Tab・Enterでリンクを操作できることを確認してください。
リンクの表示と操作の見本
次はPHPが追加するHTMLだけを記事内で表示した見本です。
リンク先の確認と、Tab・Enterによる操作に使えます。
実際のヘッダーへの挿入は上のフィルターで行うため、このHTMLを本文に貼るだけではヘッダーは変わりません。
powered by MOTOKI合同会社
この例では、PHPの出力とCSSに専用の waza-powered-by クラスを使います。
記事内見本では、1280px幅と390px幅でTabのフォーカス枠を確認し、EnterでMOTOKI合同会社のトップページへ移動できました。
通常ヘッダーと追従ヘッダーの分岐は、ローカルのWordPressでPHPを実行して確認しています。
導入サイトでのヘッダー配置は、本文の見本とは別に確認してください。
加工済みロゴの再処理でリンクを重複させない
通常のロゴを新しく描画するたびに、この例はリンクを一つ追加します。
掲載コードは追加済みのHTMLコメントを確認し、同じ加工済みHTMLへフィルターを再適用してもリンクを追加しません。
2026年10月4日、隔離したWordPress 7.1.2 / SWELL 2.19.0で実際のロゴ描画を使い、加工済みHTMLの再処理ではリンク一つ、新しい通常ロゴの描画でもリンク一つになることを確認しました。
追従ヘッダーにはリンクも印も追加していません。
HTMLコメントを取り除く外部処理や、掲載コードを入れたヘッダーのPC・スマホ配置とキーボード操作は未検証です。
