2

ほんの数日前、基本的に静的サイトのメニュー項目をメニュー内のリスト項目の数に応じて縮小および拡大できる優れたスクリプトを入手しました。現在、サイトを Wordpress インストールに変換する作業を開始しましたが、Javascript に慣れていないため、サイトを機能させるのに問題があります。

スクリプトは実行されず、基本的な Wordpress PHP のみが実行されます。

これはスクリプトです：

$(document).ready(function() {      
  li_count = $('#main-navigation li').length;
  div_size = $('#main-navigation').width();
  new_li_font_size = (div_size/10)/li_count+'px';
new_li_width = 100/li_count+'%';
  $('#main-navigation li').css('font-size', new_li_font_size);
  $('#main-navigation li').css('width', new_li_width);
  console.debug(new_li_size);
});

これは私の以前のナビゲーションです:

<nav id="main-navigation">
<ul>
    <li><a href="index.html">Hjem</a></li>
    <li><a href="butikker-single.html">Butikker</a></li>
    <li><a href="kampanjer.html">Kampanjer</a></li>
    <li><a href="#">Åpningstider</a></li>
    <li><a href="#">Om torvgårdens ting og tang</a></li>
</ul>
</nav><!-- END #main-navigation -->

これは私の現在のナビゲーションです:

<nav id="main-navigation" role="navigation">
            <ul>
                <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
            </ul>
        </nav><!-- END #main-navigation -->

私はスクリプトを見てきました.phpにli-tagがなくなったという事実と関係があると思いますが、jQueryの経験がないことを考えると、間違っているかもしれません. 誰でも私を助けることができますか？:)

念のため、頭の中に入れたjQueryの実装を次に示します。

<?php wp_enqueue_script("jquery"); ?>
    <?php wp_head(); ?>
    <script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/menu.js"></script>

マイケル

4

1 に答える 1

1

ファイルでWordPress使用できるスクリプトを追加するにはwp_enqueue_scriptfunctions.php

function load_menu_js() {
    wp_enqueue_script(
        'menu_js',
        get_template_directory_uri() . '/js/menu.js',
        array('jquery')
    );
}
add_action('wp_enqueue_scripts', 'load_menu_js');

上記のコードは、ページの head セクションにを追加します。タグを手動で追加scriptする必要はありません。これが推奨される方法です。<script>menu.js

また、使用する必要があります

(function ($) {
    $(document).ready(function() {      
        // code goes here
    });
})(jQuery);

wp_head()ファイルの読み込みに使用したの後のスクリプト タグを削除しmenu.js、次のコードも変更します。

<nav id="main-navigation" role="navigation">
        <ul>
            <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
        </ul>
</nav>

to (タグで満たされた をwp_nav_menu()生成します)ulli

<nav id="main-navigation" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</nav>

また、古いブラウザではサポートされていないタグも覚えておいてnavください。代わりにhtml5使用できます。<div id="main-navigation"></div>

于 2013-03-15T12:50:42.590 に答える