Question

我只是想在我的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" alt="Logo" width="200" height="300" /></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" alt="App Store'dan indir!" width="135" height="40" /></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" alt="Google Play'den indir!" width="135" height="40" /></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" alt="Windows Store'dan indir!" width="135" height="40" /></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]

我只想将[modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"]用于 WP导航栏。

我该怎么做？我可以在functions.php中为此编写一个函数，或者尝试另一种方法吗？

谢谢......

Answer 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;
}

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

希望它有意义。

Answer 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);

Answer 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" alt="Logo" width="200" height="300" /></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" alt="App Store'dan indir!" width="135" height="40" /></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" alt="Google Play'den indir!" width="135" height="40" /></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" alt="Windows Store'dan indir!" width="135" height="40" /></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);

Answer 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 Nav Bar中的自定义短代码

4 个答案: