标签归档:WordPress

WordPress 菜单功能使用教程

WordPress 的菜单是非常好的功能,但是新手在使用的时候一般会有一些困惑,本文就来详细的讲解一下菜单怎么使用。

首先,在后台的 “外观” 下进入菜单。WordPress 可以创建多个菜单,当主题提供菜单功能的时候,你需要创建菜单,然后把菜单应用到主题需要的菜单。

 

创建好之后,就可以向菜单添加项目了,在左侧的三个手风琴菜单就能添加菜单了,分别用来添加不同类型的菜单。

 

添加好之后,就可以在右侧管理了,通过拖动来设置菜单分级和顺序。

 

点击每个链接还可以设置更多关于此链接设置,想要更多的设置可以在顶部的 “显示选项” 设置。

最后,在底部选择当前菜单要应用到哪里就可以了。

WordPress 创建自定义小工具

之前介绍了如何让 WordPress 主题支持小工具的方法,默认的情况,只有不几个小工具,而且在国内这些小工具好多都不太常用。

如果你想给你的主题添加一个自定义小工具,或者你要开发一个添加小工具的插件,那就需要查看本文了。

创建小工具

创建一个小工具,需要使用 register_widget() 函数挂载一个继承于 WP_Widget 类的类,下边是一个简单的例子,创建了一个随机文章小工具。

注意,register_widget() 函数需要在 widgets_init 钩子上调用。

 


class widget_tags extends WP_Widget{
 
    //添加小工具
    function __construct(){
        $this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
    }
 
    //小工具内容
    function widget( $args, $instance ){
 
        //导入当前侧边栏设置
        extract( $args, EXTR_SKIP );
 
        //输出小工具前代码
        echo $before_widget;
 
            //输出小工具标题
            echo $before_title . '随机文章' . $after_title;
 
            //随机文章
            query_posts( 'orderby=rand&showposts=10' );
            if( have_posts() ):
                echo '<ul>';
                    while( have_posts() ):
                        the_post();
                        printf( '<li><a href="%s" title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
                    endwhile;
                echo '</ul>';
            endif;
 
        //输出小工具后代码
        echo $after_widget;
    }
 
}
function Bing_add_widget_tags(){
    register_widget( 'widget_tags' );
}
add_action( 'widgets_init', 'Bing_add_widget_tags' );

这样,后台就会出现了一个随机文章小工具,拖动到侧边栏上,会在前台显示十篇随机文章。

小工具设置

但我们会发现这个小工具并没有设置选项,那如何给这个小工具添加设置选项呢?设置选项涉及类的两个函数,update()(更新小工具设置时的处理函数)和 form()(设置表单)。

下边的代码添加了一个标题设置和显示文章数量的设置:

class widget_tags extends WP_Widget{
 
    //添加小工具
    function __construct(){
        $this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
    }
 
    //小工具内容
    function widget( $args, $instance ){
 
        //导入当前侧边栏设置
        extract( $args, EXTR_SKIP );
 
        //输出小工具前代码
        echo $before_widget;
 
            //输出小工具标题
            echo $before_title . '随机文章' . $after_title;
 
            //随机文章
            query_posts( 'orderby=rand&showposts=10' );
            if( have_posts() ):
                echo '<ul>';
                    while( have_posts() ):
                        the_post();
                        printf( '<li><a href="%s" title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
                    endwhile;
                echo '</ul>';
            endif;
 
        //输出小工具后代码
        echo $after_widget;
    }
 
    //更新选项
    function update( $instance, $old_instance ){
        $instance['title'] = strip_tags( $instance['title'] );
        $instance['number'] = (int) strip_tags( $instance['number'] );
        return $instance;
    }
 
    //选项表单
    function form( $instance ){
 
        //添加默认设置
        $instance = wp_parse_args( $instance, array(
            'title' => __( '随机文章', 'Bing' ),
            'number' => 10
        ) );
 
        //设置表单
?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '标题', 'Bing' ); ?>:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $instance['title']; ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( '文章数量', 'Bing' ); ?>:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" value="<?php echo $instance['number']; ?>" />
        </p>
<?php
    }
 
}
function Bing_add_widget_tags(){
    register_widget( 'widget_tags' );
}
add_action( 'widgets_init', 'Bing_add_widget_tags' );

 

这样再展开小工具,就能看到设置了:

然后,在生成小工具内容的时候使用选项,就能达到用户自定义的效果。

class widget_tags extends WP_Widget{
 
    //添加小工具
    function __construct(){
        $this->WP_Widget( 'random_posts', __( '随机文章', 'Bing' ), array( 'description' => __( '显示几篇随机文章', 'Bing' ) ) );
    }
 
    //小工具内容
    function widget( $args, $instance ){
 
        //导入当前侧边栏设置
        extract( $args, EXTR_SKIP );
 
        //添加小工具标题过滤器
        $title = apply_filters( 'widget_name', $instance['title'] );
 
        //输出小工具前代码
        echo $before_widget;
 
            //输出小工具标题
            echo $before_title . $title . $after_title;
 
            //随机文章
            query_posts( 'orderby=rand&showposts=' . $instance['number'] );
            if( have_posts() ):
                echo '<ul>';
                    while( have_posts() ):
                        the_post();
                        printf( '<li><a href="%s" title="%s">%s</a></li>', get_permalink(), get_the_title(), get_the_title() );
                    endwhile;
                echo '</ul>';
            endif;
 
        //输出小工具后代码
        echo $after_widget;
    }
 
    //更新选项
    function update( $instance, $old_instance ){
        $instance['title'] = strip_tags( $instance['title'] );
        $instance['number'] = (int) strip_tags( $instance['number'] );
        return $instance;
    }
 
    //选项表单
    function form( $instance ){
 
        //添加默认设置
        $instance = wp_parse_args( $instance, array(
            'title' => __( '随机文章', 'Bing' ),
            'number' => 10
        ) );
 
        //设置表单
?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( '标题', 'Bing' ); ?>:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $instance['title']; ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( '文章数量', 'Bing' ); ?>:</label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" value="<?php echo $instance['number']; ?>" />
        </p>
<?php
    }
 
}
function Bing_add_widget_tags(){
    register_widget( 'widget_tags' );
}
add_action( 'widgets_init', 'Bing_add_widget_tags' );

 

如何安装 WordPress 的 Beta 测试版

最近几年,WordPress 一直保持着非常快的更新频率,每隔两三个月,就会发布一个新的大版本。随着 WordPress 核心的变化,主题和插件可能无法完全兼容新的版本,如果你是一个开发者,就需要根据核心的更新,来调整你的主题或插件。

在新的版本正式发布之后再来进行适配,显然就已经太晚了。幸运的是,WordPress 团队提供了专门给开发人员使用的 Beta 版本,用来预告未来的更新内容。

谁应该使用 Beta 测试版?

测试版虽然比正式版更快的推出新功能,但并不推荐所有人使用。包含但不限于需要使用 WordPress Beta 测试版的人群:

  • 正在制作或维护 WordPress 相关的产品,比如主题和插件
  • 网站管理员测试主题、插件与新版本的兼容性
  • 爱好者寻找新版本的漏洞,想为 WordPress 的更新出一份力
  • 对 WordPress 新版本的功能有着极大的兴趣,已经迫不及待的想体验一下

注意:测试版是仍处于开发中的版本,很容易出现不稳定和有漏洞的情况。所以,任何情况下都不要将它安装到正式运行的在线网站中,而是在本地环境和测试网站中安装,即使出现意外,也不会造成多大的影响。

安装 Beta 测试版

如果你想创建一个新的 WordPress 当做测试版,可以点击此处下载最新的测试版压缩包,然后和正式版一样安装

不过,大多数人应该和我一样,都是打算将现有的正式版 WordPress 升级到 Beta 测试版。默认情况下,后台的更新功能,只会推送正式版的核心,所以需要使用插件来开启更新测试版模式。

安装并启用 WordPress Beta Tester 插件,进入后台的“工具”→“Beta Testing”,选择一个选项后点击“保存设置”:

[freesrc srctitle=”WordPress Beta Tester” srcdesc=” By Peter Westwood, Andy Fragen” url=”https://www.wpxyz.com.cn/wp-content/uploads/2020/04/wordpress-beta-tester.2.2.9.zip” id=”330″ thumbnail=”https://www.wpxyz.com.cn/wp-includes/images/media/archive.png” title=”wordpress-beta-tester.2.2.9″]

WordPress 隐藏默认登录页面

WordPress 的后台登录页面为根目录的 wp-login.php。所有 WordPress 网站默认都使用这个文件登录,这造成了一定的风险,因为试图攻击网站的人可以很轻易的找到目标。如果禁用这个页面,就相当于把进入网站后台的大门给关闭,大门都找不到就很容易让小偷放弃破解我们的网站。

禁用默认登录表单

想要禁用默认的登录表单,只需要安装 Secure Hidden Login 插件。在安装并启用插件之后,进入后台的“设置”→“Secure Hidden Login” 设置插件。

Secure Hidden Login 插件可以禁用默认用来登录的 wp-login.php 页面,并在前台生成一个迷你登录表单。

插件设置选项

插件后台是英文的,这里我简答介绍一下各个选项。

Display Style

前台登录表单开启按钮的样式,有 5 个选项,分别是:

  1. 显示在屏幕右上角,一个小锁头的图标
  2. 显示在屏幕左上角,一个 WordPress 的图标
  3. 显示在屏幕右下角,一个 “π” 字符
  4. 显示在屏幕右上角,一个 “LOGIN” 字符
  5. 不显示图标,只能通过快捷键来开启登录表单

 

“Display Style” 设置的 5 个选项

Trigger Login Bar Letter

开启前台登录表单的快捷键。如果填写 “L”,则可以在前台通过 Ctrl+L 或者 Alt+L 组合键来开启呼出登录表单。

Block wp-login.php

是否禁用 wp-login.php 页面的登录表单,建议开启。

警告:如果开启此选项,请一定要在关闭这个选项之后再卸载插件,否则无法正常访问 wp-login.php 页面;如果你已经在开启此选项的状态下卸载插件,请参考文末的解决方法。

Redirect to Home page on Logout

是否将登出后的页面跳转到首页。

Button Color

前台登录表单的按钮样式,有两个按钮,可以分别选择。

Update Secure Hidden Login Settings

保存选项。

如何保证 WordPress 的账号安全

保护账号不被破解是一个重要的问题。

1、自己不要使用弱密码。弱密码不仅是像 “123456”、“mima” 和 “wordpress” 之类立刻就能想到的密码,即使是手机号也不行,密码中应该包含字母、数字和符号,不要在所有的地方使用同一个密码。

建议:密码中可以使用如 “SSWNSZPYXR” 这些看似复杂无规律实际上有很好记的字符(世上无难事只怕有心人)。

2、利用本文的方法关闭默认的登录窗口,隐藏破解网站的大门。

3、限制登录次数,防止通过不断尝试暴力破解。

解禁 wp-login.php 页面

回到我们之前说的 Secure Hidden Login 插件,如果你在禁用了 wp-login.php 的情况下卸载插件,会造成即使插件卸载了,依然无法通过默认表单登录的情况。

这时候编辑网站根目录的 .htaccess 文件,删除 “# BEGIN Secure Login” 和 “# END Secure Login” 之间的所有内容即可:

WordPress 为不同的语言添加不同的样式

WordPress 是一个多语言的内容管理系统,有完善的多语言发开 API。在开发多语言的主题或插件时,只需要使用语言包即可实现语言本地化。

但是,在实际开发中,只有语言包可能无法保证 100% 的兼容。因为语种、字体的不同,可能需要给某些语言单独添加 CSS 样式。

给不同的语言添加不同的样式只需要把下边的代码放到主题的 functions.php或者插件之中:

/**
    *WordPress 为不同的语言添加不同的样式
    *http://www.endskin.com/body-class-locale-language/
*/
function Bing_body_class_add_locale( $classes ){
    $classes[] = 'locale-' . sanitize_html_class( get_locale() );
    return $classes;
}
add_filter( 'body_class', 'Bing_body_class_add_locale' );

这样,body 标签就会在不同的语种出现不同的 Class 类。比如简体中文就会有 “locale-zh_CN”、美式英语就会有 “locale-en_US”。

这样,利用这个 Class 类,就可以给不同的语种添加不同的样式,比如下边的 CSS 代码,为简体中文单独设置了字体:

WordPress 使用 WP_Http 类发送 Http 请求

在 PHP 中发送 Http 请求(GET / POST)有很多的方法,比如 file_get_contents() 函数、fopen() 函数或者 cURL 扩展,但由于服务器的情况不同,所以不一定会兼容所有情况,这样想要发送 Http 请求则需要经过一系列的判断,非常麻烦。

不过 WordPress 提供了一个 WP_Http 的类来帮你做好兼容性的判断,你只需要调用里边的函数就能完成发送 Http 请求。下面我就简单的介绍一下这个类的常用函数。

发送 GET 请求

WordPress 让所有的外链在新窗口打开

在使用 WordPress 建立网站时,最好不要让站内链接在新窗口打开,因为对用户体验不好。但是,如果链接的目标是别的网站,就最好在新窗口打开,避免用户想回到我们的网站时找不到了,而损失流量。

新窗口打开链接
在后台的文章编辑器中,插入链接时,可以通过勾选“在新窗口或标签页打开链接”让链接在新窗口打开:

但是这样手动设置,难免会出现遗漏,而且只对文章中的链接有效,网站其它地方则无法这么设置。

有一个更好的办法,可以通过一个小插件让所有外部链接自动在新窗口打开,而且在全站范围内都有效。

所有外链自动在新窗口打开
想要让所有的外链自动在新窗口打开,可以安装并启用 Open external links in a new window 插件,不用任何设置,就可以开始工作。

插件使用的是 JavaScript 的 window.open() 方法来打开链接,而不是使用 HTML 的 target=”_black” 属性。这么做的好处是,既符合 XHTML 严格的标准,又对搜索引擎比较友好。

另外,插件还提供了一些简单的设置。在后台的“设置”→“External links” 页面,可以通过正则表达式来排除或者强制链接在新窗口打开:

[freesrc srctitle=”External Links in New Window / New Tab ” srcdesc=”By WebFactory Ltd” url=”https://www.wpxyz.com.cn/wp-content/uploads/2020/04/open-external-links-in-a-new-window.1.4.zip” id=”279″ thumbnail=”https://www.wpxyz.com.cn/wp-includes/images/media/archive.png” title=”open-external-links-in-a-new-window.1.4″]

WordPress 禁用或禁止收录媒体页

默认情况下,WordPress 会为媒体库中的每一个媒体创建单独的网页,包括图片、视频和 PDF 文档等。我相信很多同学甚至都不知道这种页面的存在,你可以在媒体库中随便找一个媒体,鼠标悬浮上去,点击「查看」链接就能进入媒体页了。

这个功能对于大多数人来说的是无用的,除非你是摄影作品展示之类的网站,否则访客只看插入到文章中的图片或视频就行。

而且,大部分主题都没有针对媒体页做出优化,看起来也是巨丑无比,非常不协调,这种无用的垃圾页面我们还是直接想办法干掉好了。

方法一、使用插件

最简单也是我推荐的方法就是直接安装一个插件,它叫做 Attachment Pages Redirect,安装并启用之后,如果再访问媒体页,会被强制跳转到媒体所属的文章页,如果媒体没有归于任何文章,就会跳到首页。

这种方法弄起来非常快,只需要你在网站后台搜索插件,一键安装,再轻轻按下启用按钮就好,而且插件本身只有一个小函数,对于服务器的性能消耗几乎可以忽略不计。

[freesrc srctitle=”Attachment Pages Redirect” srcdesc=” By Samuel Aguilera” url=”https://www.wpxyz.com.cn/wp-content/uploads/2020/04/attachment-pages-redirect.1.1.1.zip” id=”221″ thumbnail=”https://www.wpxyz.com.cn/wp-includes/images/media/archive.png” title=”attachment-pages-redirect.1.1.1″]

方法二、修改主题文件

找到主题根目录下的 attachment.php 文件(如果没有就创建一个),在最开头加入下列代码:

<?php
/**
 * 跳转到媒体所属的文章页
 *
 */
function Bing_disable_attachment_pages() {
    if ( ( $post_parent = wp_get_post_parent_id() ) > 0 )
        $redirect = get_permalink( $post_parent );
    else
        $redirect = home_url();
 
    wp_redirect( $redirect );
    die;
}
Bing_disable_attachment_pages();
?>

方法三、禁止收录

如果你不想禁止媒体页的访问,但是想阻止搜索引擎收录它的话,可以把下边的代码加入到主题的 functions.php 里:

/**
 * 禁止搜索引擎收录媒体页
 *
 */
function Bing_disable_robots_index_attachment_pages() {
    if ( is_attachment() )
        wp_no_robots();
}
add_action( 'wp_head', 'Bing_disable_robots_index_attachment_pages' );

这样做的话,媒体页的 <head> 标签里会输出一条 <meta> 标签指令,告诉搜索引擎不收录这个页面。

后记

我的网站已经使用了方法一来彻底禁用媒体页,我认为媒体页对我来说没有任何用处,媒体库中的图片不需要也不能单独观看,而是需要用户联系文章中的上下文来查看,单独的一个媒体页面没有意义。

其次,我使用了页面缓存插件来加速网站并且减缓服务器压力,媒体页会导致插件生成大量的缓存,比其它所有页面加起来还要大,并且这些页面还 800 年没有一个人访问,非常的浪费。

最后一个理由,无论你的固定链接设置成什么,只要不是默认,媒体页的网址都会是文章名的形式,这个文章名默认就是上传图片时的文件名,由于我的截图都是软件根据日期自动生成的名字,放在链接中间难看的要命,简直受不了!

WordPress 自定义摘要字数和省略号样式

在 WordPress 的主题开发中,我一般推荐使用核心自带的 get_the_excerpt() 函数来获取文章的摘要。如果用户在文章编辑器里手动设置了摘要则调用设置的内容;没手动设置时,也会自动从文章的开头开始,截取一部分内容作为摘要。

在循环中调用文章摘要

想在文章循环中输出当前文章的摘要,可以直接使用 the_excerpt() 函数,例如:

<?php if( have_posts() ): ?>
    <ul>
        <?php
        while( have_posts() ):
            the_post();
        ?>
            <li <?php post_class(); ?>>
                <?php
                the_title( '<h2>', '</h2>' );
                the_excerpt();
                ?>
            </li>
        <?php endwhile; ?>
    </ul>
<?php endif; ?>

上边的代码放到模板文件里,最终会生成类似下方的 HTML 代码:

<ul>
    <li class="post">
        <h2>WordPress 让访问者调整网页字号</h2>
        <p>很多网站都在网页上放置可以调整字体大小的按钮,这些按钮可以让视力不好的人更轻松的浏览网页。浏览器一般都内置了可 [&hellip;]</p>
    </li>
    <li class="post">
        <h2>WordPress 给置顶文章设置一个到期时间</h2>
        <p>在 WordPress 中,可以使用自带的置顶功能来突出一些文章,让访客优先阅读。但是,文章往往不需要一直是置 [&hellip;]</p>
    </li>
    <!--省略剩余循环部分-->
</ul>

值得注意的是:调用摘要的两个函数 the_excerpt() 和 get_the__excerpt() 的主要区别在于,前者是直接输出,后者是返回,可以保存到变量里。

并且,the_excerpt() 函数会自动给摘要添加 <p> 标签,而 get_the_excerpt() 不会。可以理解为,the_excerpt() 输出的是一段经过处理的 HTML 代码,给摘要进行了自动换行、解析表情符号为图片和转义引号等操作;而 get_the_excerpt() 是原始的文本摘要,除了文字截取,没有经过任何处理。

自定义摘要字数

这时候问题来了,用户没设置摘要时,应该从文章中截取多少字用做摘要呢?答案是 55 个字,因为 WordPress 默认就是这样设计的,但我们可以修改它。

在制作主题时,摘要需要多少字往往取决于页面的样式允许它有多大的空间,而不是天生设定好的 55 字。

这时,就可以使用 excerpt_length 过滤器来自定义文章摘要的字数(长度)。比如,在主题的 functions.php 中添加以下代码,就可以将所有的摘要字数都规定为 100 字:

function Bing_excerpt_length(){
    return 100;
}
add_filter( 'excerpt_length', 'Bing_excerpt_length' );

通过修改代码中函数的返回值,可以任意设置摘要的字数。然后在循环中使用文章开头提到的方法调用摘要,就会是我们设置的字数。

自定义摘要省略号样式

摘要的结尾一般会有一个省略号,表示此处展示的文章内容只是一部分预览,剩下的内容需要进入到文章页面浏览。

这个省略号默认样式为 [&hellip;],是一个 HTML 转义字符,在网页中实际显示为 […]。可能是为了更加明显吧,给正常的西文省略号添加了一对中括号。

但我觉得,没有中括号反而会更好看一些,所以使用 excerpt_more 钩子修改了摘要省略号的样式

function Bing_excerpt_more(){
    return '&hellip;';
}
add_filter( 'excerpt_more', 'Bing_excerpt_more' );

同样的,可以任意设置函数的返回值,来自定义省略号样式,比如修改成中文的六个点省略号。

另外,也可以在函数里调用一些获取当前文章信息的函数,比如添加文章链接:

function Bing_excerpt_more( $more ){
    if( in_the_loop() ){
        $href_attr = esc_url( get_permalink() );
        $text      = __( '阅读更多', 'Bing' );
        $more      = "<a href='$href_attr'>$text</a>";
    }
    return $more;
}
add_filter( 'excerpt_more', 'Bing_excerpt_more' );

整合函数

上边介绍的方法,无论是修改字数还是省略号,都有一个共同的缺点:它把网站中所有的摘要字数都改了。如果主题里有好几处地点需要使用摘要,并且字数不一致,就会比较麻烦。

而且这种方法也会影响 WordPress 后台的样式。在文章列表的“摘要视图”下,显示的文章摘要同样会被修改字数:

所以,这里我使用了一个封装函数,将以上的需求封装到了一起。把下边的函数放到主题的 functions.php 文件或者插件中,即可使用: