[wordpress插件] ATR advanced menuATR高级菜单

wordpress 插件 文章 2020-02-22 18:10 563 0 全屏看文

AI助手支持GPT4.0

评分
0
描述

Easily create accessible mega/dropdown menu with images/icons/title/posts using standard WordPress menu editing page (supports keyboard interaction ).

使用标准WordPress菜单编辑页面(支持键盘交互)轻松创建带有图像/图标/标题/帖子的可访问的超级/下拉菜单。

Add menu item icons and images from media library, icon-font or featured image of the post(automatically).

从媒体库添加菜单项图标和图像,图标字体或帖子的精选图像(自动)。

Create menu items with none standart content, like videos, post content or anything that can be put in a post.

创建没有标准内容的菜单项,例如视频,帖子内容或任何可以放在帖子中的内容。

Note: This plugin requires a change of the header.php file of your theme (or another file, if the menu is defined somewhere else).

注意:此插件需要更改主题的header.php文件(如果菜单在其他位置定义,则需要更改其他文件)。

It also requires css editing in order to style it.

它还需要CSS编辑才能设置样式。

It will technically work out of the box but you nust style it.

从技术上讲,它可以立即使用,但是您必须设置样式。

See a demo here:

在此处查看演示

0;'>

See the menu editing guide here:

在此处查看菜单编辑指南:

0;'>

Features

功能

    1. Save each item without reloading the page.
    2. 保存每个项目而无需重新加载页面。

    3. Each menu item is conrolled separately
    4. 每个菜单项都是单独控制的

    5. Show images in menu items.

    6. 在菜单项中显示图像。

      Select between font icon, image from media library, Featured image of the post or none.

    7. 在字体图标,媒体库图像,帖子的特色图像之间进行选择。

    8. In addition to the image you can show in the menu: Title Attribute, Description and Subtitle.
    9. 除了图像之外,您还可以在菜单中显示:标题属性,描述和字幕。

    10. Menu items can load full post (thus, enables you to inject html, video, image etc. or even shortcode) or post excerpt directly into it.

    11. 菜单项可以加载完整的帖子(因此,使您能够注入html,视频,图像等,甚至是简码)或直接将摘要摘录到其中。

    12. Remove title (and link) from menu item (if you want the menu item with post not to show menu title).
    13. 从菜单项中删除标题(和链接)(如果您希望带有帖子的菜单项不显示菜单标题)。

    14. Load web-font directly from the menu settings.
    15. 直接从菜单设置中加载网络字体。

    16. Let you define a unique class to each drop down panel.

    17. 让您为每个下拉面板定义一个唯一的类。

      This way you can control each panel layout separately.

    18. 这样,您可以分别控制每个面板的布局。

    19. Uses class prefix to avoid css conflicts.
    20. 使用类前缀来避免CSS冲突。

    all the editing of the menu is done by the familiar menu editor of wordpress.

    所有菜单的编辑都是由熟悉的wordpress菜单编辑器完成的。

安装步骤

Note: You must define a valid menu in your WP before activating the plugin in order for it to work correctly.

注意:激活插件之前,必须在WP中定义一个有效菜单,以使其正常工作。

If you see an error regarding this plugin, deactivate it and set a menu first.

如果您看到有关此插件的错误,请先停用它,然后先设置菜单。

Installation can be done either by searching for “ATR advanced menu” via the “Plugins > Add New” screen in your WordPress dashboard, or by using the following steps:

可以通过在WordPress仪表板中的“插件>添加新”屏幕中搜索“ ATR高级菜单”来完成安装,或者使用以下步骤进行操作:

    1. Download the plugin via WordPress.org
    2. 通过WordPress.org下载插件

    3. Upload the zip file through the ‘Plugins > Add New > Upload’ screen in your WordPress dashboard
    4. 通过WordPress信息中心中的“插件>添加新文件>上传”屏幕上传zip文件

    5. Activate the plugin through the ‘Plugins’ menu in WordPress
    6. 通过WordPress中的“插件”菜单激活插件

    After installation:

    安装后:

    Important!

    重要!

    You must edit the header.php file of your theme in order to use the menu.

    您必须编辑主题的header.php文件才能使用菜单。

    Edit your theme header.php file and add ‘walker’ => new atr_advanced_menu_walker() to wp_nav_menu.

    编辑您的主题header.php文件,然后在wp_nav_menu中添加“ walker” =>新的atr_advanced_menu_walker()。

    :

    add to this:

     添加到此:

     <?php wp_nav_menu(array(    

    'theme_location' => 'primary',    

    'theme_location'=>'primary',    

    'menu_class' => 'nav-menu',    

    'menu_class'=>'导航菜单',    

    'menu_id' => 'primary-menu'    

    'menu_id'=>'主菜单'    

    ) );

    ));

    ?>

    ?>

    See the last property:

    查看最后一个属性:

     

     <代码> 
     <?php        

    wp_nav_menu( array(        

    wp_nav_menu(array(        

    'theme_location' => 'primary',        

    'theme_location'=>'primary',        

    'menu_class' => 'nav-menu',        

    'menu_class'=>'导航菜单',        

    'menu_id' => 'primary-menu',        

    'menu_id'=>'主菜单',        

    'walker' => new atr_advanced_menu_walker()        

    '行者'=> new atr_advanced_menu_walker()        

    ) );        

    ));        

    ?>

    ?>

    Note 1: If you use a theme that uses indirect call to the menu definition (mostly in bought themes or themes that use a framework) you'll have to find the correct way to apply the plugin in that theme.

    注1:如果您使用间接调用菜单定义的主题(通常在购买的主题或使用框架的主题中),则必须找到在该主题中应用插件的正确方法。

    p>

    >

    Note 2: Examine the class of the menu wrapper div in your theme (like ‘menu_class’ => ‘nav-menu’ in above example ).

    注2:检查主题中菜单包装div的类(例如上例中的“ menu_class” =>“ nav-menu”)。

    Usually this theme class has properties that override the plugin’s css definitions and can mess up your menu.

    通常,此主题类的属性会覆盖插件的CSS定义,并且可能使您的菜单混乱。

    If that happens, simply specify the css rule like so:

    如果发生这种情况,只需像这样指定css规则:

    Find the rule that breaks the menu, for example:

    查找打破菜单的规则,例如:

    .main-navigation ul ul {}

    .main-navigation ul ul {}

    Duplicate it and add “.megamenu” (the wrapper for the plugin’s generated menu ) as an explicit selector.

    复制它并添加“ .megamenu”(插件生成的菜单的包装器)作为显式选择器。

    .main-navigation .megamenu ul ul {}

    .main-navigation .megamenu ul ul {}

    You’ll have also to set the other classes for the menu to display well.

    您还必须设置菜单的其他类别才能很好地显示。

    Settings

    设置

    Right after activating the plugin, go to Appearance – > ATR advanced menu Settings

    激活插件后,立即转到外观–> ATR高级菜单设置

    Set your settings and save.

    设置并保存。

下载地址
https://downloads.wordpress.org/plugin/atr-advanced-menu.zip
-EOF-

AI助手支持GPT4.0