WordPressのテーマで、bodyタグに権限を識別するためのクラスを追加する際のメモです。
テーマの「functions.php」に下記のように追記します。
|
1 2 3 4 5 6 7 8 9 |
function theme_role_class($classes) { $user = wp_get_current_user(); if ($user->roles[0]) { $classes[] = 'role-'.$user->roles[0]; } return $classes; } add_filter('body_class', 'theme_role_class'); |
例えば、管理者としてログインしている場合に「role-administrator」というクラスがbodyタグに追加されます。
JavaScriptライブラリのGSAPを使ったアコーディオンメニュー作成のサンプルです。
サンプルはこちら
HTMLは「div.menu」内に開閉用のボタンとリストのみを配置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="menu"> <p class="button">ボタン</p> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> </ul> </div><!-- menu --> |
初期表示で「height:0px; overflow: hidden;」として見えない状態にしておきます。
「pointer-events: none;」は閉じている時に、タブキー等でメニュー内の項目にフォーカスが当たらないようにしています。
|
1 2 3 4 5 6 7 8 |
ul { height: 0px; overflow: hidden; pointer-events: none; } ul.open { pointer-events: auto; } |
開閉用のボタンがクリックされたら、「open」クラスの有無により開閉を行います。
|
1 2 3 4 5 6 7 8 9 |
let menu = $("div.menu"); menu.find("p.button").on("click", () => { gsap.to(menu.find("ul"), { height: (menu.hasClass("open")) ? 0 : "auto", duration: 0.25, ease: "power2.inOut" }); menu.toggleClass("open"); }); |
WordPressでは
内に、自動でCanonical URLのタグを出力してくれますが、期待通りにならない場合があります。|
1 |
remove_action('wp_head', 'rel_canonical'); |
Canonical URLを置き換えるための関数は、同じくfunctions.php内に、次のように追記します。
|
1 2 3 |
function get_url() { return (is_ssl() ? 'https://' : 'http://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; } |
あとはheader.phpの
内に、Canonical URLのタグを出力するように記述します。|
1 |
<link rel="canonical" href="<?php echo get_url(); ?>"> |
WordPressのテーマの作成で、bodyタグに表示しているページスラッグを追加する際のメモです。
functions.php内に次のように追記します。
|
1 2 3 4 5 6 7 8 9 10 |
function get_page_parts() { $parts = array(); $url_parse = parse_url($_SERVER['REQUEST_URI']); foreach (explode('/', $url_parse['path']) as $part) { if (!preg_match('/^[0-9]+/', $part) && $part != '') { $parts[] = $part; } } return $parts; } |
header.php内のbodyタグを次のように書き換えます。
|
1 |
<body <?php body_class(get_page_parts()); ?>> |
階層ページでは各スラッグをbodyタグのクラスに追加して、数字から始まるものは除外するようにしています。
YouTubeの<iframe>による埋め込みをレスポンシブに対応するには、外側に<div>で囲み、次のようなCSSで可能です。
|
1 2 3 |
<div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/xxxxxxxxxx"></iframe> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
div.video-wrapper { position: relative; padding-bottom: 56.25%; /* 比率が16:9の場合 */ } div.video-wrapper iframe { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } |
WordPressのエディタなどで、毎回手作業による囲む作業は大変なので、JavaScript（jQuery）で一括で処理を行っておくと便利です。
|
1 2 3 |
$("iframe[src*='youtube.com']").each(function() { $(this).wrap("<div class=\"video-wrapper\"></div>"); }); |