1

以下のコードを取得して、作業中のテーマの現在のページを常に強調表示しようとしていますが、何もしません。HTML 部分は、スクリプトの下に示されているとおりです。修正のための提案または解決策。

<script type="text/javascript">
    var url = window.location.href;
    url = url.substr(url.lastIndexOf("/") + 1);
    $("#navbar").find("a[href='" + url + "']").addClass("current");
</script>

<div id="navbar">
    <ul>
        <li><a href="index.php">home</a></li>
        <li><a href="services/">services</a></li>
        <li><a href="procedure/">procedure</a></li>
        <li><a href="about-us/">about</a></li>
        <li><a href="contact-us/">contact</a></li>
    </ul>
</div>
4

2 に答える 2

1

WP Nav Menuを調べる必要があります。

これはあなたが開発しているテーマだと思いますか？その場合は、functions.php ファイルにNav メニューを登録します。これにより、Wordpress ダッシュボード (外観 -> メニュー) でメニューを定義し、好きなようにカスタマイズできるようになります。

私がこれを提案している理由は、非常に直感的な方法でメニューを完全に制御できるようにするだけでなく、スタイルシートに必要になる可能性のあるすべてのクラスを自動的に定義するためです (現在のアイテムを含む)祖先）。

これは、自由に使用できる最もクリーンなオプションです。同様の (より限定的な) ソリューションについては、WP List Pagesを調べることもできます。

それ以外の場合は、次のような汚いことをする必要があります。

<?php
$id = get_the_ID();
$class = ' class="current"';
?>
<ul>
    <li<?php echo is_home() ? $class : ''; ?>><a href="<?php echo home_url(); ?>">home</a></li>
    <li<?php echo $id==$serives_ID ? $class : ''; ?>><a href="<?php echo get_permalink($serives_ID); ?>">services</a></li>
    <li<?php echo $id==$procedure_ID ? $class : ''; ?>><a href="<?php echo get_permalink($procedure_ID ); ?>">procedure</a></li>
    <li<?php echo $id==$about_ID ? $class : ''; ?>><a href="<?php echo get_permalink($about_ID); ?>">about</a></li>
    <li<?php echo $id==$contact_ID ? $class : ''; ?>><a href="<?php echo get_permalink($contact_ID); ?>">contact</a></li>
</ul>

$services_ID、$procedure_ID などをそれぞれのページ ID に置き換えます。現在の ID がそれらのいずれかに一致する場合、そのアイテムには「現在」のクラスが適用され、スタイルシートでターゲットにすることができます。

あらゆる種類の jQuery を使用するよりもサーバー側のソリューションを提案する主な理由は、これが jQuery 自体に特に適したタスクではないからです。

jQuery ライブラリは強力なツールですが、Wordpress には、このインスタンスで検出したいすべてのものを検出するために必要な組み込み機能がすべて備わっています。クライアントのブラウザに引​​き継がせる前に、サーバーにできるだけ多くの作業をさせてください。そうしないと、深刻なロード時間が発生することになります。

更新: 最後のコメントに基づいて、面倒な方法でページの ID を見つけることに煩わされたくない場合は、次のようにすることもできます。

<?php
$slugs = array('services', 'procedure', 'about-us', 'contact-us');
?>
<ul>
    <li<?php echo is_home() ? ' class="current"' : ''; ?>><a href="<?php echo home_url(); ?>">home</a></li>
    <?php
    foreach($slugs as $slug)
    {
        $page = get_page_by_path($slug);
        $class = is_page($slug) ? ' class="current"' : '';
        echo '<li'.$class.'><a href="'.get_permalink($page->ID).'">'.str_replace('-us','',$slug).'</a></li>';
    }
    ?>
</ul>

最後のコメントに基づく更新:

wp_nav_menu を使用するようになったので、現在のメニュー項目を CSS でターゲットにすることができます。現在のアイテムの背景を赤に変える例を次に示します。

<style type="text/css">
.current-menu-item{background:#F00;}
</style>

これらのルールをヘッダーに適用するか、できればメインの style.css ファイルに適用します。幸運を！

于 2012-06-01T00:38:06.367 に答える
0

substr は / +1 の lastindex を使用しています。html に表示されているリンクは、末尾に / があります。/で終わる文字列は常にその部分文字列で空の文字列を返すため、2つは相互に排他的であると思います。

于 2012-06-01T00:20:46.463 に答える