wp bootstrap navwalkerダウンロード - wp bootstrap navwalkerソースコードのダウンロード

WP ブートストラップ Navwalker

メインリポジトリブランチにあるこのコードは、最近の標準に合わせて、長期間放置していた PR のバックログをマージしてテストするために、大幅な変更が行われています。このプロセスが実行される間、安定バージョンには v4.3.0 タグを使用してください。 https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0

WordPress の組み込みメニューマネージャーを使用して、カスタムテーマで Bootstrap 4 ナビゲーションスタイルを完全に実装するためのカスタム WordPress Nav Walker クラス。

注意事項

これは、ブートストラップドロップダウンナビゲーションを利用するために、正しい構文と CSS クラスを使用して WordPress テーマメニューをフォーマットすることを目的としたユーティリティクラスです。必要なブートストラップ JS ファイルと CSS ファイルは含まれていません。これらを手動で含める必要があります。

WordPress.org テーマのコンプライアンス

このウォーカーは、wordpress.org テーマの提出に関するすべてのテーマレビューガイドラインに完全に準拠しています。準拠するために変更を加える必要はありませんが、オプションでwp-bootstrap-navwalkerテキストドメイン ( fallback関数で 2 回出現します) をテーマのテキストドメインに置き換えることができます。

アップグレードに関する注意事項

ウォーカーのバージョン 3 とバージョン 4 の間で、コードベースに大幅な変更が加えられました。ウォーカーのバージョン 4 は、Bootstrap 4 で動作するように構築されており、Bootstrap 3 との下位互換性についてはテストされていません。Bootstrap 3 用の別のブランチはここで維持されています: https://github.com/wp-bootstrap/wp-bootstrap- navwalker/ツリー/v3-ブランチ

最も注目すべき変更点のリストは次のとおりです。

ファイル名は、PHP コーディング標準の命名規則に合わせて変更され、接頭辞としてclass-が付けられました。
- 新しい名前: class-wp-bootstrap-navwalker.php
- 旧名: wp-bootstrap-navwalker.php
アイコンとリンク修飾子の処理は、 Title入力ではなくCSS Classesメニュー項目入力を通じて行われるようになりました。
アイコンのみのアイテムは、アイコンクラスとsr-onlyクラス名を組み合わせて使用することで可能になります。

インストール

class-wp-bootstrap-navwalker.php をWordPress テーマフォルダー/wp-content/themes/your-theme/に配置します。

WordPress テーマのfunction.phpファイル ( /wp-content/themes/your-theme/functions.php ) を開き、次のコードを追加します。

 /**
 * Register Custom Navigation Walker
 */
function register_navwalker (){
	require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}
add_action ( ' after_setup_theme ' , ' register_navwalker ' );

上記のコードでエラーが発生した場合は、次のようなチェックを使用してクリーンなエラーを返し、問題の診断に役立ててください。

 if ( ! file_exists ( get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ) ) {
    // File does not exist... return an error.
    return new WP_Error ( ' class-wp-bootstrap-navwalker-missing ' , __ ( ' It appears the class-wp-bootstrap-navwalker.php file may be missing. ' , ' wp-bootstrap-navwalker ' ) );
} else {
    // File exists... require it.
    require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}

新しいメニューが存在しない場合は、 functions.phpファイルで新しいメニューを宣言する必要もあります。

 register_nav_menus ( array (
    ' primary ' => __ ( ' Primary Menu ' , ' THEMENAME ' ),
) );

使用法

テーマ内のwp_nav_menu()関数 (通常はheader.phpにあります) を追加または更新し、 'walker'項目を wp_nav_menu args 配列に追加して新しいウォーカーを使用します。

 wp_nav_menu ( array (
    ' theme_location '  => ' primary ' ,
    ' depth '           => 2 , // 1 = no dropdowns, 2 = with dropdowns.
    ' container '       => ' div ' ,
    ' container_class ' => ' collapse navbar-collapse ' ,
    ' container_id '    => ' bs-example-navbar-collapse-1 ' ,
    ' menu_class '      => ' navbar-nav mr-auto ' ,
    ' fallback_cb '     => ' WP_Bootstrap_Navwalker::fallback ' ,
    ' walker '          => new WP_Bootstrap_Navwalker (),
) );

これで、メニューが正しい構文とクラスでフォーマットされ、ブートストラップドロップダウンナビゲーションが実装されます。

通常、メニューは追加のマークアップでラップされます。ここでは、md ブレークポイントで応答性の高いナビゲーションのために折りたたまれるfixed-topメニューの例を示します。

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu ( array (
            ' theme_location '    => ' primary ' ,
            ' depth '             => 2 ,
            ' container '         => ' div ' ,
            ' container_class '   => ' collapse navbar-collapse ' ,
            ' container_id '      => ' bs-example-navbar-collapse-1 ' ,
            ' menu_class '        => ' nav navbar-nav ' ,
            ' fallback_cb '       => ' WP_Bootstrap_Navwalker::fallback ' ,
            ' walker '            => new WP_Bootstrap_Navwalker (),
        ) );
        ?>
    </div>
</nav>

メニュースタイルを変更するには、Bootstrap nav クラス名をmenu_class宣言に追加します。

nav クラスの詳細については、Bootstrap ドキュメントのオプションを確認してください。

メニューを表示する

メニューを表示するには、メニューをテーマの場所に関連付ける必要があります。これを行うには、WordPress メニューマネージャーでメニューを編集するときに、テーマの場所リストでテーマの場所を選択します。

このウォーカーをナビゲーションメニューのデフォルトウォーカーにする

このウォーカーをすべてのメニューのデフォルトのウォーカーにすることに関心が寄せられています。その結果、予期せぬ状況が発生する可能性がありますが、この関数をfunctions.phpファイルに追加することで解決できます。

 function prefix_modify_nav_menu_args ( $ args ) {
    return array_merge ( $ args , array (
        ' walker ' => new WP_Bootstrap_Navwalker (),
    ) );
}
add_filter ( ' wp_nav_menu_args ' , ' prefix_modify_nav_menu_args ' );

ウォーカーを更新するだけではメニューを正しく機能させるのに十分ではない場合があります。ラッパーまたは追加のクラスを追加する必要がある場合があります。これは上記の関数を使用して行うこともできます。

Bootstrap 5 での使用法

Bootstrap 5 は名前空間付きデータ属性を使用します。すべてのdata属性に接頭辞としてbsが含まれるようになりました。新しい属性は古い属性と同様に機能します。これは、名前が変更されたデータ属性を持つ上記の例のメニュートグルボタンです。

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
    <span class="navbar-toggler-icon"></span>
</button>

ウォーカーは、 start_el()メソッドを介してドロップダウン切り替えのデータ属性も追加します。これを function.php に貼り付けて、ウォーカーが infixed data 属性を使用できるようにします。

 add_filter ( ' nav_menu_link_attributes ' , ' prefix_bs5_dropdown_data_attribute ' , 20 , 3 );
/**
 * Use namespaced data attribute for Bootstrap's dropdown toggles.
 *
 * @param array    $atts HTML attributes applied to the item's `<a>` element.
 * @param WP_Post  $item The current menu item.
 * @param stdClass $args An object of wp_nav_menu() arguments.
 * @return array
 */
function prefix_bs5_dropdown_data_attribute ( $ atts , $ item , $ args ) {
    if ( is_a ( $ args -> walker , ' WP_Bootstrap_Navwalker ' ) ) {
        if ( array_key_exists ( ' data-toggle ' , $ atts ) ) {
            unset( $ atts [ ' data-toggle ' ] );
            $ atts [ ' data-bs-toggle ' ] = ' dropdown ' ;
        }
    }
    return $ atts ;
}

メニューのキャッシュ

一部のサイトでは、ページリクエストごとにめったに変更されない大きなメニューを生成することはオーバーヘッドとなるため、避けたい場合があります。そのような場合は、メニュー結果をトランジェントに保存することを検討することをお勧めします。

このメソッドでナビゲーションメニューをキャッシュする最大の欠点は、WP がページの読み込み時に現在アクティブなものを決定するため、またメニューがキャッシュされているため、現在アクティブな項目に .current .current-menu-itemまたは.activeクラスを簡単に適用できないことです。元々キャッシュされていたアクティブなページのみを認識します。

ほとんどのページ読み込み時のメニュー生成時間をなくすために、これらの欠点を我慢するかどうかは、自分で決めることができます。 Dave Clements によるこの記事に従って、このウォーカーによって生成されたナビゲーションメニューをどのようにキャッシュしたかを確認できます: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/

これを実行するときは、結果をページにエコーする代わりに保存できるように、 the wp_nav_menu()呼び出しでecho引数を必ず FALSE に設定してください。

以下も参照してください。

https://generatewp.com/how-to-use-transients-to-speed-up-wordpress-menus/
https://vip-svn.wordpress.com/plugins/cache-nav-menu/cache-nav-menu.php

エクストラ

このスクリプトには、WordPress メニュー UI を通じてメニューで Bootstrap ナビゲーションリンク MOD を使用する機能が含まれていました。無効なリンク、ドロップダウンヘッダー、およびドロップダウンディバイダーがサポートされています。さらに、Glyphicons と Font Awesome のアイコンサポートが組み込まれています (注: アイコンのスタイルシートまたはアセットを個別に含める必要があります)。

アイコン

リンクにアイコンを追加するには、メニュー UI のリンクCSS クラスフィールドに Glyphicons または Font Awesome クラス名を入力するだけで、残りの作業は walker クラスが実行します。 IE のglyphicons glyphicons-bullhornまたはfa fa-arrow-leftまたはfas fa-arrow-left 。

アイコンのみのアイテム

項目をアイコンとともに表示するには、ブートストラップスクリーンリーダークラスsr-onlyアイコンクラス名と一緒に項目に適用するだけです。これにより、リンクテキストとして表示されるテキストのみが非表示になります。

無効なリンク

無効なリンクを設定するには、メニュー UI のCSS クラスフィールドにdisabledを追加するだけで、残りの作業はウォーカークラスが実行します。注: .disabled クラスの追加に加えて、リンクhref #に変更され、フォロー可能なリンクではなくなります。

ドロップダウンヘッダー、ドロップダウンディバイダー、ドロップダウン項目テキスト

カスタムリンクを追加し、 dropdown-header 、 dropdown-dividerまたはdropdown-item-textのいずれかをCSS クラス入力に追加することで、ヘッダー、ディバイダー、およびテキストのみの項目をドロップダウン内に追加できます。注: これにより、項目のhrefが削除され、ヘッダーの<span>またはディバイダーの<div>に変更されます。

カスタマイザープレビューに編集ショートカットが表示されない

wp_nav_menu()のドキュメントによると、カスタムウォーカーをメニューに適用するには、カスタムウォーカークラスのインスタンスを提供する必要があります。インスタンスは JSON シリアル化可能ではないため、メニュー編集ショートカットがカスタマイザープレビューに表示されなくなります。これを修正するには、次の手順を実行します。

wp_nav_menu の引数の配列内の「walker」キーの値として、クラスインスタンスの代わりにクラス名の文字列を指定します。

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
-    'walker'          => new WP_Bootstrap_Navwalker(),
+    'walker'          => 'WP_Bootstrap_Navwalker',
) );

このフィルターをfunctions.phpに追加して、クラスインスタンスを再追加します。

 function slug_provide_walker_instance ( $ args ) {
    if ( isset ( $ args [ ' walker ' ] ) && is_string ( $ args [ ' walker ' ] ) && class_exists ( $ args [ ' walker ' ] ) ) {
        $ args [ ' walker ' ] = new $ args [ ' walker ' ];
    }
    return $ args ;
}
add_filter ( ' wp_nav_menu_args ' , ' slug_provide_walker_instance ' , 1001 );

変更履歴

変更履歴を参照してください。

拡大する

wp bootstrap navwalker

WP ブートストラップ Navwalker

注意事項

WordPress.org テーマのコンプライアンス

アップグレードに関する注意事項

インストール

使用法

メニューを表示する

このウォーカーをナビゲーションメニューのデフォルトウォーカーにする

Bootstrap 5 での使用法

メニューのキャッシュ

エクストラ

アイコン

アイコンのみのアイテム

無効なリンク

ドロップダウンヘッダー、ドロップダウンディバイダー、ドロップダウン項目テキスト

カスタマイザープレビューに編集ショートカットが表示されない

変更履歴

headers security advanced hsts wp

ブートストラップアイランドゲーム

テンプレートを使用して WP ブログの正式バージョンを構築する

b2evolution は WP に匹敵するブログシステムです

WP.NET .NET版WordPress

WP eコマース

chat.petals.dev

GPT Prompt Templates

GPTyped

termwind

wp functions

slugify

waymo open dataset

termwind

wp functions

wp bootstrap navwalker

WP ブートストラップ Navwalker

注意事項

WordPress.org テーマのコンプライアンス

アップグレードに関する注意事項

インストール

使用法

メニューを表示する

このウォーカーをナビゲーション メニューのデフォルト ウォーカーにする

Bootstrap 5 での使用法

メニューのキャッシュ

エクストラ

アイコン

アイコンのみのアイテム

無効なリンク

ドロップダウンヘッダー、ドロップダウンディバイダー、ドロップダウン項目テキスト

カスタマイザー プレビューに編集ショートカットが表示されない

変更履歴

このウォーカーをナビゲーションメニューのデフォルトウォーカーにする

カスタマイザープレビューに編集ショートカットが表示されない