Wordpress 导航栏中的自定义简码

Posted

技术标签:

【中文标题】Wordpress 导航栏中的自定义简码【英文标题】:Custom shortcode in Wordpress Nav Bar 【发布时间】:2017-01-29 11:14:24 【问题描述】:

我只想在我的 wordpress 主题菜单栏中添加一个简码按钮来处理 bootstrap modal view 函数。

我尝试了“Shortcodes in Menus”插件,但它不起作用。我在菜单中找不到短代码的替代插件,所以我安装了“Bootstrap 3 Shortcodes”插件,它根据我的需要创建了按钮和模式视图内容。但我无法将简码添加到我的菜单栏。

我努力寻找有关我的问题的答案。但遗憾的是不能。

这是我由 Bootstrap 3 Shortcodes 插件生成的模态简码;

[modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"]
<p style="text-align: center;"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/08/vetmapp-logo-withtext.png"    /></p>

<h4 style="text-align: center;">VetMapp'i cihazınıza göre aşağıdaki platformlardan cep telefonunuza ücretsiz olarak indirebilir ve hemen kullanmaya başlayabilirsiniz.</h4>
<p style="text-align: center;">
  <a href="https://itunes.apple.com/tr/app/vetmapp-acil-veteriner-klinikleri/id969463902?mt=8" target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xapple-store.png.pagespeed.ic.z0I7tHw8h6.png"    /></a>
  <a href="https://play.google.com/store/apps/details?id=com.esmobileinc.vetmapp&amp;hl=tr"
  target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xgoogle_play.png.pagespeed.ic.31v8JAmtbI.png"    /></a>
  <a href="https://www.microsoft.com/tr-tr/store/p/vetmapp/9nblggh4s3qm"
  target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xwindows_phone.png.pagespeed.ic.xvoiaCiuDP.png"    /></a>
</p>
[modal-footer] [button type="primary" style="border: solid 1px #18bda3; background-color: #fff; color: #18bda3;" link="#" data="dismiss,modal"]Kapat[/button] [/modal-footer] [/modal]

我只想在 WP Navigation Bar 中使用[modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"]

我该怎么做?我可以为此在functions.php中编写一个函数,或者尝试其他方法?

谢谢...

【问题讨论】:

您想要从简码按钮到菜单项的样式? 我现在不在乎风格。我只想通过菜单栏项触发引导模式视图。 您是否还请分享您用简码 [modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"] 包装的标记? 【参考方案1】:

如果您分享您的简码生成标记或您想用简码包装什么标记,最好让其他人清楚地理解。

无论如何试试这个它会顺利运行(已测试)

add_filter( 'wp_nav_menu_items', 'wpse3967385_custom_menu_link', 10, 2 );

function wpse3967385_custom_menu_link( $items, $args ) 
   if ($args->theme_location == 'primary_nav') 
      $items .= '<li class="your-custom-item">' . do_shortcode( '[modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"]' ) . '</li>';
   
   return $items;

随意更改您的菜单主题位置。

希望它有意义。

【讨论】:

【参考方案2】:
function my_function_name($item_output) 
    if( YOUR LOGIC FOR WHEN YOU WANT IT )
       $item_output .= do_shortcode('[modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"]');

    return $item_output;

add_filter('wp_nav_menu', 'my_function_name', 10, 1);

【讨论】:

嗨,它不起作用。警告:my_function_name() 缺少参数 2,在第 235 行的 /opt/bitnami/apps/wordpress/htdocs/wp-includes/plugin.php 中调用并在 /opt/bitnami/apps/wordpress/htdocs/wp-content 中定义/themes/frexy/functions.php 第 89 行【参考方案3】:

我不确定提供此简码的结果是什么。在我的想法中,您可以在单击然后显示模型窗口时看到一个按钮,并且您想在导航菜单上实现按钮。我没有测试这些代码,但如果这对你有帮助,你可以试试。

首先创建一个新的 php 文件并将所有短代码内容放在那里。 前任。我的-modal.php

//my-modal.php
[modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"]
<p style="text-align: center;"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/08/vetmapp-logo-withtext.png"    /></p>

<h4 style="text-align: center;">VetMapp'i cihazınıza göre aşağıdaki platformlardan cep telefonunuza ücretsiz olarak indirebilir ve hemen kullanmaya başlayabilirsiniz.</h4>
<p style="text-align: center;">
  <a href="https://itunes.apple.com/tr/app/vetmapp-acil-veteriner-klinikleri/id969463902?mt=8" target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xapple-store.png.pagespeed.ic.z0I7tHw8h6.png"    /></a>
  <a href="https://play.google.com/store/apps/details?id=com.esmobileinc.vetmapp&amp;hl=tr"
  target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xgoogle_play.png.pagespeed.ic.31v8JAmtbI.png"    /></a>
  <a href="https://www.microsoft.com/tr-tr/store/p/vetmapp/9nblggh4s3qm"
  target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xwindows_phone.png.pagespeed.ic.xvoiaCiuDP.png"    /></a>
</p>
[modal-footer] [button type="primary" style="border: solid 1px #18bda3; background-color: #fff; color: #18bda3;" link="#" data="dismiss,modal"]Kapat[/button] [/modal-footer] [/modal]

在你的主题function.php中创建一个新函数并包含这个文件。

function modal_shortcode_content()
  ob_start();
  include "my-modal.php";
  $shortcode_content = ob_get_content();
  ob_clean();
  return do_shortcode($shortcode_content);

在导航内容中添加简码输出。我不确定我是否认为简码仅提供按钮,而当您单击按钮时,其他部分是隐藏和可见的。

function navigation_add_button_menu($item_output) 
 // apply any logic here...
       $item_output .= modal_shortcode_content();

    return $item_output;


add_filter('wp_nav_menu', 'navigation_add_button_menu', 10, 1);

【讨论】:

【参考方案4】:

你的代码很乱,我不能给你一个工作脚本,因为它是另一种我不懂的语言,我不想弄乱一些东西。

不管怎样,试试这个。这是通过简码获得所需内容的简单逻辑。我在我的网站上使用它。

function html_code() 
    if( //Trigger Event Goes Here ) 
       // Use echo's to output the HTML of the window
    


function modal_window() 
    html_code();

    return ob_get_clean();


add_shortcode( 'modal_window' );

【讨论】:

以上是关于Wordpress 导航栏中的自定义简码的主要内容,如果未能解决你的问题,请参考以下文章

导航栏中的自定义文本

导航栏中的自定义字体截断使用分号而不是省略号

添加简码时未定义 WordPress 功能

wordpress中的自定义导航栏。如何正确设置样式?

Gatsbyjs 中的自定义导航栏

Wordpress 简码返回另一个 php 页面