0

これらのナビゲーション メニュー項目の HTML と CSS は動作していますが、WordPress の各メニュー項目の直前にこれらの固有の画像を追加する方法を見つける必要があります。これらはメニュー名にカーソルを合わせるとアニメーション化されるため、CSS の背景画像として機能させることができなかったため、HTML に配置する必要がありました。

HTMLは次のとおりです。

<aside>
    <nav id="side-nav">
        <ul>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-01.png" height="25" width="34">Shop</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-02.png" height="25" width="34">Dine</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-04.png" height="25" width="34">Visit</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-05.png" height="25" width="34">Culture</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-13.png" height="25" width="34">Lodgings</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-06.png" height="25" width="34">Entertainment</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-16.png" height="25" width="34">Services</a></li>
        </ul>
    </nav>  
</aside>

これは、ページ名とリンクをメニュー項目に自動的に配置する WordPress の PHP です。 

<?php wp_nav_menu(array('menu' => 'Main Nav Menu')); ?>

これに画像リンクを追加するにはどうすればよいですか?

4

1 に答える 1

1

クラスを使用して画像を css 背景にすることをお勧めします。また、wordpress 管理領域のメニュー エディターには、各メニュー項目にクラスを追加するオプションがあります。(表示されない場合は、[画面オプション] をクリックして [css クラス] をオフにします)。

次にtext-indent: -9999px;、メニュー項目に a を追加して、画像のみを表示します。

真ん中のロゴはこちらのサイトで作りました。

それはそのようになります：

menu-item {
    background: url('http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-01.png') no-repeat;
    text-indent: -9999px;
}

menu-item:hover{
    text-indent: 0px;
}
于 2013-07-08T22:13:20.593 に答える