Навигация по WordPress с изображениями

Question

Я сейчас работаю над сайтом WordPress. Все хорошо, кроме моей навигации. Я не хочу использовать стандартную текстовую и CSS-навигацию, которую использует WordPress, но вставляю свою собственную навигацию с графическими изображениями (PNG-файлы, хотя при необходимости можно изменить тип файла).

Кто-нибудь знает какой-либо плагин для WordPress, который позволяет вам иметь изображения вместо текста в навигации?

С уважением, Надер

Answer 1

Вы хотите иметь свой собственный файл CSS? если это так, вы можете просто использовать это, чтобы сказать WordPress, используйте свой собственный файл CSS:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

пример:

<?php

    /*
     * This example will work with WordPress 2.7
     */

    /*
     * register with hook 'wp_print_styles'
     */
    add_action('wp_print_styles', 'add_my_stylesheet');

    /*
     * Enqueue style-file, if it exists.
     */

    function add_my_stylesheet() {
        $myStyleUrl = plugins_url('style.css', __FILE__); // Respects SSL, Style.css is relative to the current file
        $myStyleFile = WP_PLUGIN_DIR . '/myPlugin/style.css';
        if ( file_exists($myStyleFile) ) {
            wp_register_style('myStyleSheets', $myStyleUrl);
            wp_enqueue_style( 'myStyleSheets');
        }
    }

?>

Answer 2

Изменение вывода навигационной панели требует стилизации вывода функции wp_navmenu (). Вы можете увидеть этот результат с помощью firebug. Это будет выглядеть примерно так:

<li id="menu-item-689" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-689">
    <a href="#">Categories</a>
</li>

Задайте для идентификатора или класса фоновое изображение и, при необходимости, скройте текст меню. Рекомендуемый способ сделать это с помощью файла style.css в дочерней теме. Не связывайтесь с файлами родителей вообще. Просто импортируйте их в новый файл style.css. Проверьте кодекс на делая дочерние темы .

Попробуйте что-то вроде этого:

#menu-item-689{
    background-image: url('whatever.img');
    margin: -999em;
    font-size: 0;
}

не используйте display:none, потому что вы хотите, чтобы программы чтения с экрана читали его. Другой метод включает установку абсолютного позиционирования для списка в целом и установку left: -999em.