カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

wp_nav_menu()を使わずにメニューをカスタマイズ表示

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

56 views

「HaCkeD by SA3D HaCk3D」WordPressの改ざん

WordPressの脆弱性を突いて、記事を改竄される事態が多数発生しています。
名の知れた有名所のサイトも被害にあっているのを見ました。

当サイトでも最新記事が改竄されていました。
日時は2月5日の10時頃。

その時の状態がこちら

問題があるのはWordPressの4.7.0と4.7.1だそうです。
対策がまだの方は最新版の4.7.2にアップデートしましょう。

参考URL:WordPress の脆弱性対策について:IPA 独立行政法人 情報処理推進機構
https://www.ipa.go.jp/security/ciadr/vul/20170206-wordpress.html

1,644 views

XML-RPC WordPress APIで記事を投稿

The Incutio XML-RPC Library for PHP
http://scripts.incutio.com/xmlrpc/
「Download the Library」をクリックしダウンロードします。

解凍すると「php-ixr-1.7.4」というフォルダーに「IXR_Library.php」というファイルがありますので
このファイルをインクルードするだけです

ライブラリをインクルード

include_once("php-ixr-1.7.4/IXR_Library.php");

投稿先アドレスを引数としてインスタンスを生成します。

$client = new IXR_Client("http://www.example.jp/xmlrpc.php");

WordPressのユーザー名とパスワードを設定します。

$wp_username = "username";
$wp_password = "password";

投稿の処理

$status = $client->query(
    "wp.newPost", //使うAPIを指定(wp.newPostは、新規投稿)
    1,            //ブログID 通常は1、マルチサイトの場合は変更が必要
    $wp_username, //ユーザー名
    $wp_password, //パスワード
    array(
        "post_author" => 1,                        //投稿者ID 未指定の場合、投稿者名なしになります
        "post_status" => "publish",                //投稿状態
        "post_title" => "テスト投稿です。",        //タイトル
        "post_content" => "テスト投稿本文です。",  //本文
        "terms" => array("category" => array(1)),  //カテゴリ
    )
);

if(!$status){
    die("エラー! - ".$client->getErrorCode()." : ".$client->getErrorMessage());
} else { 
    $post_id = $client->getResponse(); //返り値は投稿ID
}

続きを読む…»

4,151 views

WordPress テーマの一覧を取得

日本語の公式リファレンスが未記入だったので、覚書の意味も含めて書きたいと思います。

WordPressにて、現在インストールされているテーマの一覧を表示する方法です。
wp_get_themesという関数を使用します。

戻り値に各テーマの情報を連想配列で返してくれますので、ループして情報を取り出すことができます。

$themes = wp_get_themes();
print_r($themes);

続きを読む…»

2,047 views

WordPress管理画面のサイドバーレイアウトが崩れる

Chromeで表示したWordPressの管理画面で、サイドバーメニューのレイアウトが崩れるという問題が発生しているようです。

WordPressとChromeのバージョンの組み合わせによって発生するようですが、
原因はWordPressではなくChromeの問題らしいです。
私は以下の方法で解決しました。

スリミングペイントを無効にする

Chromeでchrome://flags/#disable-slimming-paintを開きます。
「スリミングペイントを無効にする」を有効にします。
Chromeを再起動する。

2,132 views