WordPressのメニューを表示する際、wp_nav_menuメソッドを使って表示することがあると思います。
その際の例

wp_nav_menu( array( 'menu' => 'GlobalMenu', 'menu_id' => 'global_navi', 'container_class' => 'global_navigation' ) );

wp_nav_menuではidやクラス等、ある程度はパラメータを与えることでカスタマイズ出来るようになっています。
しかし、例えばメニューアイテムの最後に任意のアイテムを追加で表示させたいなど、柔軟なカスタマイズをすることが出来ません。

そんな柔軟なカスタマイズを行いたいときの手法をご紹介します。

順に解説していきますが、実際には一連の処理をfunctions.phpにカスタムメソッドとして作成し、メニューを表示したい任意の箇所で実行してください。

解説

メニュー名を指定し、wp_get_nav_menu_objectメソッドでメニュー情報を取得します。
※メニュー名は[外観]->[メニュー]->[メニュー構造]で設定しているメニュー名を指定してください。

// メニュー名
$menu_name = 'GlobalMenu';
// メニュー情報取得
$menu = wp_get_nav_menu_object($menu_name);

取得したメニュー情報を基にメニューアイテムを取得します。

// メニューアイテム取得
$menu_items = wp_get_nav_menu_items($menu->term_id);

取得したメニューアイテムの情報にCSSクラスの情報がありますが、この段階では[外観]->[メニュー]->[メニュー構造]の各項目で設定したCSS class(オプション)で指定したクラスしか設定されていません。
wp_nav_menuでメニューを表示したときはWordPressが自動的に設定してくれているクラスが含まれています。
そのクラスも含めて設定して欲しいときは_wp_menu_item_classes_by_contextメソッドを実行し、本来wp_nav_menuでなら適用されるクラスを反映させます。
但し、このメソッドは公式ガイドにはプライベートだと書かれておりテーマ開発者の実行を想定していないそうなので、今後使えなくなったりする可能性はあります。

// 自動で割り当てられるWP独自クラスを反映させる
_wp_menu_item_classes_by_context($menu_items);

続いてdiv等でラッピングしつつ、リストを作成していきます。

echo '<div class="global_navigation">';
echo '<ul id="global_navi" class="menu">';

又、先ほど実行した_wp_menu_item_classes_by_contextだけではmenu-item-メニューIDクラスが追加されていないので、こちらは手動で追加します。

// クラス用配列
$current_classes = [];

ループでメニューアイテムを取り出していきます。

foreach ( (array) $menu_items as $key => $menu_item ) {

    // クラス用配列にmenu-item-メニューIDを追加
    $current_classes = array_merge($menu_item->classes, ['menu-item-'.$menu_item->ID]);

    echo '<li class="' . implode(' ', $current_classes) . '">';
    echo '<a href="' . $menu_item->url . '"' . (($menu_item->current) ? ' aria-current="page"' : '') . '>' . $menu_item->title . '</a>';
    echo '</li>';
}

ループでメニューアイテムの取り出しが一通り終わったところで、追加アイテムを書き出します。

echo '<li>追加メニューアイテム</li>';

最後にHTMLタグを閉じます。

echo '</ul>';
echo '</div>';

以上でカスタマイズしたメニューを表示することが出来ます。

wp_get_nav_menu_object() – Function | Developer.WordPress.org
_wp_menu_item_classes_by_context() – Function | Developer.WordPress.org

MySQLのシステムテーブルから指定したテーブルのカラム名とデータ型を取得します。

SELECT COLUMN_NAME, DATA_TYPE
FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_NAME = 'テーブル名';

MySQL等から返されるハイフン区切りの日付をJavaScriptでスラッシュ区切りにしたいことがあったので、その方法をご紹介します。

まず単純な方法であれば文字列分割＆結合でやることも可能です。

console.log('2024-08-29'.split('-').join('/'));
// 2024/08/29

別な方法としてDateオブジェクトを使って実装してみたいと思います。
toLocaleDateStringを使いロケールに日本を指定して実行してみます。

let date = new Date('2024-08-29').toLocaleDateString('ja-JP');
console.log(date);
// 2024/8/29

スラッシュ区切りにはなりましたが、月が1桁になっています。
月を2桁で表示したい場合はtoLocaleDateStringメソッドの第2引数にオプションを指定します。

let date = new Date('2024-08-29').toLocaleDateString('ja-JP', { year: "numeric", month: "2-digit", day: "2-digit" });
console.log(date);
// 2024/08/29

これでyyyy/mm/ddの形式になりました。

参考URL:
Date.prototype.toLocaleDateString() – JavaScript | MDN

あまり使うことはないかもしれませんが、メモ代わりに投稿しておきます。

特定の日時を指定してコミットするには--dateオプションを使って日時を指定します。

git commit -m "コミットメッセージ" --date="Jan 1 00:00:00 2024 +0900"

onchangeイベントはform要素のinputではないdiv等の要素では検知することが出来ません。
そんな時はどうすれば良いでしょうか？その方法をご紹介します。

MutationEvent ※非推奨

そんな時、以前はこんな方法がありました。
※サンプルコードではjQueryを使用しています。

サンプルのHTML

<input type="button" id="click_me" value="Click!">
<div id="sample"></div>

DOMSubtreeModified propertychangeイベントを使って変更を検知する

$(document).ready(function() {
    $('#sample').on('DOMSubtreeModified propertychange', function() {
        alert('Change!');
    });
    $('#click_me').click(function() {
        $('#sample').text('Change!');
    });
});

しかしながら上記のMutationEventは非推奨となっています。
現在は代わりにMutationObserverを使って同様のことが出来るようになっています。

続きを読む…»