我已经注册了一个新的小部件区域，代码如下，并希望在.textwidget, 然而，似乎不能正确地做到这一点。将其添加到</li> 导致按钮未包含在容器中，从而导致页面混乱，这是意料之中的。
无法将容器添加到<li class="parallax"> 使用传统方法的框-我能想到的唯一方法是通过jQuery，这确实不理想。我想知道是否有什么我可以添加到寄存器边栏函数或其他东西，以便获得<button> 直接在.textwidget.
现在我的按钮在.textwidget 通过将代码添加到后端的小部件区域，但这并不是我想要的。当然，我完全可以定位按钮等等，但将按钮扩展到其父容器之外会有问题（它也有一些填充）。
功能。php
if (function_exists(\'register_sidebar\')) {
register_sidebar(array(
\'name\'=> \'Parallax Area\',
\'id\' => \'parallax\',
\'before_widget\' => \'<li class="parallax-box">\',
\'after_widget\' => \'</li>\',
\'before_title\' => \'<h2>\',
\'after_title\' => \'</h2>\',
));
}
HTML
<div class="parallax">
<div class="container">
<ul>
<?php
if (!function_exists(\'dynamic_sidebar\') || !dynamic_sidebar(\'Parallax Area\')) : ?>
<?php endif; ?>
</ul>
</div><!-- .container -->
</div><!-- .parallax -->
当前HTML输出
<div class="parallax">
<div class="container">
<ul>
<li class="parallax-box">
<h2>Computer Repair</h2>
<div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.
<button class="btn-action">Learn More...</button></div>
</li>
<li class="parallax-box">
<h2>Computer Repair</h2>
<div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.
<button class="btn-action">Learn More...</button></div>
</li> <li class="parallax-box">
<h2>Computer Repair</h2>
<div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.
<button class="btn-action">Learn More...</button>
</div>
</li> <li class="parallax-box">
<h2>Computer Repair</h2>
<div class="textwidget">Here will be some text that explains the contents of this box and allows them to click through to a page.
<button class="btn-action">Learn More...</button></div>
</li>
</ul>
</div><!-- .container -->
</div>
SO网友:Douglas.Sesar
只要按钮都一样：
if (function_exists(\'register_sidebar\')) {
register_sidebar(array(
\'name\'=> \'Parallax Area\',
\'id\' => \'parallax\',
\'before_widget\' => \'<li class="parallax-box">\',
\'after_widget\' => \'<button class="btn-action">Learn More...</button></li>\',
\'before_title\' => \'<h2>\',
\'after_title\' => \'</h2>\',
));
}
如果按钮不完全相同，可以使它们相同，并在中指定target href
.textwidget 在按钮上，单击jQuery的操作：
<li class="parallax-box">
<h2>Computer Repair</h2>
<div class="textwidget" data-href="http://link/to/your/content">Here will be some text that explains the contents of this box and allows them to click through to a page.
</div>
<button class="btn-action">Learn More...</button>
</li>
。
<script type="text/javascript">
jQuery(document).ready(function() {
(function ($) {
$(\'.btn-action\').on(\'click\',function(e){
e.preventDefault();
var url = $(this).sibling(\'.textwidget\')[0].getAttribute(\'data-href\');
window.location.href=url;
});
})(jQuery);
});
</script>
SO网友:bonger
如果您可以通过标题和/或文本内容来区分文本窗口小部件，并且您不介意使用虚拟控件<div> 在按钮周围，您可以使用widget_text 过滤器关闭textwidget div，打开一个新的虚拟按钮，然后附加按钮：
function wpse155912_widget_text( $text, $instance ) {
if ( $instance[\'title\'] == \'title1\' && strpos( $text, \'text1\' ) !== false ) {
$href1 = esc_attr( get_permalink( get_page_by_title( \'page1\' ) ) );
$text .= \'</div><div class="dummy"><button class="btn-action" onclick="window.location.href=\\\'\' . $href1 . \'\\\'">Learn more...</button>\';
} elseif ( $instance[\'title\'] == \'title2\' && strpos( $text, \'text2\' ) !== false ) {
// etc.
}
return $text;
}
add_filter( \'widget_text\', \'wpse155912_widget_text\', 10, 2 );
