Notes

WordPressでbodyタグに権限を識別するためのクラスを追加

2022.12.24 / Notes

WordPressのテーマで、bodyタグに権限を識別するためのクラスを追加する際のメモです。
テーマの「functions.php」に下記のように追記します。

例えば、管理者としてログインしている場合に「role-administrator」というクラスがbodyタグに追加されます。

GSAPでアコーディオンメニュー作成のサンプル。

2022.01.09 / Notes

JavaScriptライブラリのGSAPを使ったアコーディオンメニュー作成のサンプルです。
サンプルはこちら
HTMLは「div.menu」内に開閉用のボタンとリストのみを配置します。

初期表示で「height:0px; overflow: hidden;」として見えない状態にしておきます。
「pointer-events: none;」は閉じている時に、タブキー等でメニュー内の項目にフォーカスが当たらないようにしています。

開閉用のボタンがクリックされたら、「open」クラスの有無により開閉を行います。

WordPressでCanonical URLの置き換え。

2021.06.02 / Notes

WordPressでは内に、自動でCanonical URLのタグを出力してくれますが、期待通りにならない場合があります。
そのため自動出力の設定を外して、独自に関数を作成しておくと便利です。
自動出力を外すには、functions.phpで次のように記述します。

Canonical URLを置き換えるための関数は、同じくfunctions.php内に、次のように追記します。

あとはheader.phpの内に、Canonical URLのタグを出力するように記述します。

WordPressでbodyタグのクラスにページスラッグを追加。

2021.05.24 / Notes

WordPressのテーマの作成で、bodyタグに表示しているページスラッグを追加する際のメモです。
functions.php内に次のように追記します。

header.php内のbodyタグを次のように書き換えます。

階層ページでは各スラッグをbodyタグのクラスに追加して、数字から始まるものは除外するようにしています。

YouTubeの埋め込みをレスポンシブに対応。

2020.04.22 / Notes

YouTubeの<iframe>による埋め込みをレスポンシブに対応するには、外側に<div>で囲み、次のようなCSSで可能です。

WordPressのエディタなどで、毎回手作業による囲む作業は大変なので、JavaScript(jQuery)で一括で処理を行っておくと便利です。