添加自定义帖子元的少显示/多显示链接

时间：2017-05-14 作者：Imtiaz Rayhan

所以

我有一个带有自定义元框的产品帖子类型。其中一个元框用于其他详细信息。我使用一个短代码在其他帖子中显示自定义帖子类型。

我可以在前端显示其他详细信息。当详细信息有点长时，我想添加一个show more链接，单击该链接将显示其余的详细信息。

我该怎么做？

就像他们在这里一样。https://www.retailmenot.com/单击“更多”时，将显示完整的详细信息。

提前谢谢。

2 个回复

最合适的回答,由SO网友:hwl 整理而成

您所描述的以及链接的示例是使用javascript切换容器div的显示样式属性。

您链接的示例仅在其他详细信息可用时使用，并且他们已将其放置在描述文本等的单独div中。

功能如下所示：

我们有一些divs 带ID和<span> 通过onclick调用javascript函数，showHide(). 在本例中，我们关注的是显示/隐藏div 带idshowAndHide:

<div id="somewrapper">
    <div id="always-visible">
        <span onclick="showHide()">Read More</span>
    </div>
    <div id="showAndHide">
        <p>This is the show-and-hide div.</p>
    </div>
</div>

对于javascript部分：

我们通过其id获取div，并将其设置为变量，如下所示sh. 然后我们检查sh\'s样式：显示属性。如果是的话none, 这个onclick() 将其设置为block 来展示它。如果有block, 然后它设置它none, “隐藏”它。

所有这些都可以通过几行代码轻松完成：

<script>
function showHide() {
    var sh = document.getElementById(\'showAndHide\');
    if (sh.style.display === \'none\') {
        sh.style.display = \'block\';
    } else {
        sh.style.display = \'none\';
    }
}
</script>

W3C gives a very clean example of this you can try in your browser

As a sidenote, 您可以使用css实现类似的功能visibility 属性，但其行为不同。Display:none; 不会占用空间，可有效移除；而与visibility:hidden; 元素的位置被保留。除非你正在处理table 元素并使用collapse 价值从您链接的示例开始was not 使用trs、还有空间does 展开/em>折叠，我选择Display:Block/None. Read More on Visibility: visible/hidden/collapse here.

A.much more knowledgeable explanation on the differences between Display and Visibility

将此功能添加到wordpress中的短代码输出中，需要显示/隐藏元素的id。
2）如果要添加“阅读更多”文本并再次单击，则需要知道a）将其插入包含div的可测量点，或b）它可以插入的元素prepended 或appended.
3）获取完整的javascript函数，将它们添加到文件myShowHide中。js，并将其上载到子主题的目录中。
4）在函数中。php，将脚本注册为`wp_register_script` 并将其排队`wp_enqueue_script` 在模板页面中包含该javascript文件。您还可以包装`wp_enqueue_script` 在函数中，如果您需要它只在某些页面上包含脚本。

SO网友:Porosh Ahammed

您可以为元框数据尝试以下操作：

使用以下内容查询元数据：

<?php 
    $slider = new WP_Query(array(
            \'post_type\' => \'post\',
            \'posts_per_page\' => 5,
            \'post_status\'   => \'publish\',
             \'meta_query\' => array(
                         array(
                            \'key\' => \'your metabox key\',
                            \'value\' => \'your metabox value\',
                            \'compare\' => \'IN\'
                        ) 
                    )


    ));

    if($slider->have_posts()) :
    while($slider->have_posts()) : $slider->the_post();
    $idd = get_the_ID();
?>

         <?php echo get_excerpt(); ?>
    <?php   

    endwhile;
    endif;



    ?>

并将此代码放入函数中。php：

function get_excerpt(){

$excerpt = get_the_content();

$excerpt = preg_replace(" (\\[.*?\\])",\'\',$excerpt);

$excerpt = strip_shortcodes($excerpt);

$excerpt = strip_tags($excerpt);

$excerpt = substr($excerpt, 0, 820);

$excerpt = substr($excerpt, 0, strripos($excerpt, " "));

$excerpt = trim(preg_replace( \'/\\s+/\', \' \', $excerpt));

$excerpt = $excerpt.\'.... <a href="\'.get_permalink().\'"  class="read_more"><h4 style="margin:0;">Details</h4></a>\';

return $excerpt;

}

结束

小码农CODE

添加自定义帖子元的少显示/多显示链接

功能如下所示：

相关推荐