搜索
    Hi~登录注册
    查看: 438|回复: 0
    收起左侧

    WordPress 配置随机文章侧边栏

    [复制链接]

    3

    主题

    0

    精华

    6 小时

    在线时间

    新手上路

    Rank: 1

    积分
    6
    发表于 2018-5-8 10:23:43 | 显示全部楼层 |阅读模式
    本帖最后由 Rbit 于 2018-5-8 10:29 AM 编辑

    ===
    ### 0x00 前言
    给 ***WordPress*** 配置随机文章侧边栏的方法有非常多种,比如:

    > 1、利用 WordPress 的 `get_posts()`  函数
    > 2、直接向主题模板种插入代码
    > 3、使用插件

    其他方法我没有用过,就不再这里复制粘贴了,大家有兴趣可以在百度上找找看,今天我主要讲的是 **使用插件**(***Random-post-ajax***)来完成这个 **随机文章侧边栏** 的效果。

    ### 0x01 安装插件
    大家可以在 `仪表盘->插件->安装插件->搜索插件` 中输入 **“ Random Post with ajax ”** 来搜索我们需要的这个插件

    ![Random Post with ajax]()

    点击 **现在安装**,开始安装。

    ### 0x02 插件配置

    点击 **启用** 后,我们的仪表盘左侧会多出一个选项`Random Post`,进入选项,开始配置

    ![rp_set]()

    这里主要是选择你要随机显示出来的文章分类,可以长按 `ctrl + 鼠标左键` 多选,完成后 **保存更改**。

    ### 0x03 启用插件

    在 `Random Post -> help` 中我们可以看到,只需要在你想要显示的地方插入这行代码即可显示随机文章。

    [PHP] 纯文本查看 复制代码
    do_action('wprndpst_settings');


    我一开始很纳闷,翻遍了 *WordPress*  主目录下的 `index.php` 始终找不到何处可以插入代码,我还试过在自定义主题界面增加**小工具**`插入HTML代码`,可是都不行。

    最后,是[**乱世**](https://blog.doylee.cn)大佬帮助了我解决问题,告诉我需要更改的源码在哪里。原来,我正在使用的 *WordPress主题* 是 `twentyseventeen`,我就需要在
    ```
    [Bash shell] 纯文本查看 复制代码
    *你的wordpress目录*/wp-content/themes/twentyseventeen/

    ```
    里面查找源码,而我需要在侧边栏显示,所以我要找到源码就是 `sidebar.php`
    ```
    [Bash shell] 纯文本查看 复制代码
    *你的wordpress目录*/wp-content/themes/twentyseventeen/sidebar.php

    ```
    ![sidebar]()

    若是您在 `dynamic_sidebar( 'sidebar-1' );` 前插入 `do_action('wprndpst_settings');`的话,**随机文章** 将会显示在已有侧边栏的上面,在下面插入代码的话则相反,**随机文章** 将会出现在已有侧边栏下边。

    ### 最后调整
    更改好代码后刷新页面,会发现这样随机出来的文章名字太大了,所以要调整一下字体的大小。

    ![rp_xiaoguo]()

    源码具体的位置我就不卖关子了,在下面这两个位置

    [Bash shell] 纯文本查看 复制代码
    /wp-content/plugins/random-post-ajax/core.php        (初始显示)
    /wp-content/plugins/random-post-ajax/randompost-class.php        (随机后)
    

    这两个源码都需要改,至于如何找到需要修改的地方,很简单,只需要搜索 `h2` 就行了。

    ![h2]()

    红框框住的地方就是造成文章标题如此巨大的原因,只需要把 `h2`替换成`b`即可。并且我们还可以在 `<div>` 的下方一行添加上
    [HTML] 纯文本查看 复制代码
    <h3>随机精彩文章</h3>
    


    更改过后,源码的这部分就变成了

    [PHP] 纯文本查看 复制代码
    <div>
    
            <h3>随机精彩文章</h3>
    
            <?php  if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();?>
    
            <p><h2><a  href="<?php  the_permalink(); ?>"><?php  the_title(); ?></a></h2>
    
                    <?php  if($rnd_thumbnail=='on') {
    
                            $thumb  =  wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' );
    
                            $url  =  $thumb['0'];
    
                            if ($url==''){}else{?>
    
                                    <img  src="<?php  echo  $url; ?>"  alt="<?php  the_title(); ?>">
    
                                    <?php } } if($rnd_content=="on") {?>
    
                                            <p><?php  the_excerpt(); ?></p>
    
                                            <?php } ?>
    
                                            <?php  if ($rnd_dates=="on") {?><p><date><?php  the_time('j F Y') ?></date></p><?php } ?>
    
                                    </p>
    
                                    <?php
    
                                    endwhile;
    
                                    endif;
    
                                    ?>
    
                            </div>
    
                    </div>
    
            </div>
    
    <?php  if ($query->have_posts()) { ; ?><button  id="refresh">再找找看~ </button><?php }else  ?>
    
                                    <br />
    
    <?php
    
    }
    

    同样, `/wp-content/plugins/random-post-ajax/randompost-class.php` 也需要把 **“ h2 ”** 改为 **b**  和添加一个**“ h3 ”**标题。

    ### 0x04 完成

    ![完成]()

    现在,字体的大小就变得非常的和谐整齐了~



    上一篇:浅谈渗透的知识----详细请观看视频
    下一篇:求大神发下虚拟机
    回复

    使用道具 举报

    游客
    回复
    您需要登录后才可以回帖 登录 | 获取账号

    快速回复 返回顶部 返回列表