我的一些 WordPress 开发技巧 - 开发工具篇 2

我的一些 WordPress 开发技巧 – 开发工具篇

正如本文标题所示 – 开发工具,本文并不会讲解编写代码层面实现功能的东西,面向的读者默认是有一点点基本的 HTMLCSSPHP,或会修改主题的群体,如不符合以上要求,并不建议继续往下阅读。

先来说说我在本地开发工具与搭建情况的情况

  1. 代码编辑:
    • Visual Studio Code
    • PHP Storm
  2. 运行环境
    • Nginx
    • PHP
    • MariaDB
    • Docker 弃用

我一直觉得 PHP Storm 才是开发 PHP 的最好工具,但无奈启动太慢,在笔记本上运行显得有点力不从心,所以我一般很少用它来开发主题和插件,除非一些特殊情况。

常言道,工欲善其事,必先利其器,我们可以利用一些编辑器的扩展可以更好的辅助我们快速开发

代码的智能感应

WordPress 函数集合

虽然玩了这么多年 WordPress,但对于我这种时常失忆的人,总是记不住各种函数,或者拼写错误,要么直接只记住前半部分忘记后半部分,这就很烦人,还得查文档。

WordPress Devlopment,字如其名,WordPress 开发,里面含括大量 WordPress Functions,只需要输入前半部分,然后就会提示与关键字相关的函数,而且还会描述该功能的注释。

下载地址: https://marketplace.visualstudio.com/items?itemName=hridoy.wordpress

WordPress Devlopment 插件演示
WordPress Devlopment 扩展演示

WordPress Snippets 这个扩展跟上面几乎一样,但上面的 WordPress Devlopment 有一个问题就是,enterreturn 键选择后,虽然会看到要填或可填参数的数量,但并不能准确知道其参数类型,所以并不太直观,而 WordPress Devlopment 却会准确告知你,该参数是什么类型,是 String, 是 Int 还是其他。

下载地址: https://marketplace.visualstudio.com/items?itemName=hridoy.wordpress

我的一些 WordPress 开发技巧 - 开发工具篇 5
WordPress Snippets 扩展演示

PHP Intelephense 这个扩展是跟 PHP 相关的,不仅仅是 WordPress 片段,我也是觉得好奇,试了几次确实是支持的,但这个扩展与 WordPress Snippets 有冲突,当启用这个扩展后将不会出现与上图的一对参数与类型,但在鼠标在函数上悬停时会提示相关的信息,而且提示的很细致,如果某个函数的参数类型为 Array 类型时,还会提示 Array 里面的 KeyValueValue 的类型和函数返回的内容内容类型也会告诉你。

下载地址: https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

我的一些 WordPress 开发技巧 - 开发工具篇 7
PHP Intelephense 扩展演示

提示 get_posts() 的参数是一个 Array , 这个 Array 可以包含 numberposts 這個 Key,值是一个 Int 类型,表示将要查几条数据,最好返回的是一个索引 Array , 这个返回的 Array 的每一项是 Int 类型,也可能是一个 WP_Post 对象的实例,可以根据这个对象实例获取相关内容,比如

<?php

$post_collection = get_posts(array('numberposts' => 1));

echo $post_collection->post_content;

WordPress Hook

WordPress 之所以出色,自定义修改与扩展强,本质上是离不开 ActionFilter 这些 Hook 功劳,WordPress 代码上埋伏了大量 Action 动作于 Filter Hook,有时我虽然知道这个 ActionFilterTag ,比如 Filter ,当我想进行修改时往往不知道这个传入的第二个参数执行时会可以接收什么参数时和可以接收多少个参数,有点绕,看下面就很容易理解。

<?php

add_filter(
	'get_avatar_url', //第一参数,埋伏的 tag
	function (string $url, $id_or_email, array $args): string {
		return $url;
	}, // 第二個參數,是一个方法,该方法目前接收 3 个参数,受下面的那个 3 控制
	10, // 執行第二個參數方法的優先級
	3 // 第二個參數函數能接收多少個參數
);

WordPress Hooks IntelliSensePHP Intelephense 名字得好像,都是 IntelliSense ,工作是类似的,但 PHP Intelephense 並不能做 Hook 相关的工作,WordPress Hooks IntelliSense 是专门为 Hook 而生的,当我们需要注册某个 Hook 的工作内容时,WordPress Hooks IntelliSense 就会很方便的告知你可以接收什么参数,能接受多少个参数,而且也会提醒你所有数据。

WordPress Hooks IntelliSense 视频演示

下载地址: https://marketplace.visualstudio.com/items?itemName=johnbillion.vscode-wordpress-hooks

代码洁癖,规范整齐有道

从我们第一次拿笔写字开始,老师就让我们写好字体,写好字体的好处其实就是方便阅读不会有困难,看起来不会东拉西扯的。放在代码上也是这样,缩进空格换行于之息息相关。

我看见过很多国内一些编写开源主题的小可爱,他们是十分不重视代码质量的整齐性规范性。当然常见的称呼为格式化,但我更倾向于称呼为规范整齐。以下代码来自某开源程序里的代码

<?php

//...

/**
 * 时间转化函数
 *
 * @param $now
 * @param $datetemp
 * @param $dstr
 * @return string
 */
function smartDate($unixtime, $dstr = 'Y-m-d H:i') {
		$etime = time() - $unixtime;
    if ($etime < 1) return '刚刚';     
    $interval = array (         
        12 * 30 * 24 * 60 * 60  =>  '年前 ('.date('Y-m-d', $unixtime).')',
        30 * 24 * 60 * 60       =>  '个月前 ('.date('m-d', $unixtime).')',
        7 * 24 * 60 * 60        =>  '周前 ('.date('m-d', $unixtime).')',
        24 * 60 * 60            =>  '天前',
        60 * 60                 =>  '小时前',
        60                      =>  '分钟前',
        1                       =>  '秒前'
    );
    foreach ($interval as $secs => $str) {
        $d = $etime / $secs;
        if ($d >= 1) {
            $r = round($d);
            return $r . $str;
        }
    };
}

这段代码存在三个个问题,首先是注释,注释跟实际函数接受的参数是不一样的,一开始就这把我给看懵逼了。其次第 14行 突然就缩了进去,跟后续代码不一致。三是 17 ~ 19 行与 29行 的代码拼接风格不统一,前者拼接符号 . 前后没预留空格,那后者也应该不要预留,但后者却预留了,风格不统一。

优化后的代码如下

<?php

//...

/**
 * 时间转化函数
 *
 * @param int $unixtime 时间戳
 *
 * @return string
 */
function smartDate($unixtime)
{
    $etime = time() - $unixtime;

    if ($etime < 1) return '刚刚';

    $interval = array(
        12 * 30 * 24 * 60 * 60  =>  '年前 (' . date('Y-m-d', $unixtime) . ')',
        30 * 24 * 60 * 60       =>  '个月前 (' . date('m-d', $unixtime) . ')',
        7 * 24 * 60 * 60        =>  '周前 (' . date('m-d', $unixtime) . ')',
        24 * 60 * 60            =>  '天前',
        60 * 60                 =>  '小时前',
        60                      =>  '分钟前',
        1                       =>  '秒前'
    );

    foreach ($interval as $secs => $str) {
        $d = $etime / $secs;
        if ($d >= 1) {
            $r = round($d);
            return $r . $str;
        }
    };
}

为什么我们要格式化使整齐,因为往往 PHPHTML 嵌套在一起就会十分糟糕,混乱,这就会时我们阅读和编写不方便,所以作为开源的代码,我是十分注重代码的整齐性,方便自己阅读,也方便其他小可爱阅读。

当然人是往往不能把控所有细节,包括我自己在内,但我们可以利用扩展进行帮助我们这些流水化的操作,这个扩展还是上面提到的 PHP Intelephense ,我们安装它即可在保存前右键进行选择格式化,便能将代码整齐。

当然我们还可以利用 PHP-CS-Fixer 代码修复工具帮我们更加规范,简单说下有什么好处,数组有 array() 函数和 [] 语法糖两种写法,代码上一会儿 array() 一会而 [] 会不统一,利用 PHP-CS-Fixer 与 配置与规则约定就是帮你统一使用那种写法,并帮你修改过来。

我更倾向于 array() 写法,主要是字面上明确,而且函数参数类型也是只能用 Array 表示进行类型限制,语法糖并不行,所以创建用 array(),访问用 [] 区分开。

PHP-CS-Fixer

PHP-CS-Fixer 并不是代码编辑器上一个扩展,它是个代码格式化工具,格式化的标准是 PSR-1、PSR-2 以及一些 Symfony 的标准,也可以訂製属于自己的风格。

要使用我們先把 php-cs-fixer.phar 下載下来:https://cs.symfony.com/download/php-cs-fixer-v2.phar

以我的 MacOS 为例子,下载后在命令行输入

php php-cs-fixer-v2.phar文件路径 fix 你要修复的php文件路径 

//如无意外将输出
Fixed all files in 0.103 seconds, 14.000 MB memory used

以这段来自 WP Sticker Heo 的一段代码为例子,前后对比

<?php
// 格式化前,丑到没朋友
// wp-sitcker-heo/core.php

function buildStickerPackage(): array
                                                        {
    global $stickerHeoNameList;

                                                                $component = '';
    $stickerDataCollection = array();










    $imageBaseUrl =       PLUGIN_STICKER_HEO_BASE_IMAGE_URL;

foreach ($stickerHeoNameList as $name) {
        $element = '<a href="javascript:;" title="' . $name . '" tabindex="0">' . call_user_func(__NAMESPACE__ . '\getImgElementByName',
        $name) . '</a>';
                                                        $component .= $element;

                                              $stickerDataCollection[] = array(
'name' => $name,
            'code' => ":heo-$name:",
'images' => array(
                "{$imageBaseUrl}/Sticker/{$name}.png",
"{$imageBaseUrl}/Sticker-100/{$name}.png"
            ),
'element' => $element
        );
    }

    return array(
                               'component' =>





$component,
        'stickerDataCollection' =>

        $stickerDataCollection
    );
}
<?php
// 格式化后,干净整洁有道
// wp-sitcker-heo/core.php

function buildStickerPackage(): array
{
    global $stickerHeoNameList;

    $component = '';
    $stickerDataCollection = array();

    $imageBaseUrl = PLUGIN_STICKER_HEO_BASE_IMAGE_URL;

    foreach ($stickerHeoNameList as $name) {
        $element = '<a href="javascript:;" title="' . $name . '" tabindex="0">' . call_user_func(
            __NAMESPACE__ . '\getImgElementByName',
            $name
        ) . '</a>';
        $component .= $element;

        $stickerDataCollection[] = array(
            'name' => $name,
            'code' => ":heo-$name:",
            'images' => array(
                "{$imageBaseUrl}/Sticker/{$name}.png",
                "{$imageBaseUrl}/Sticker-100/{$name}.png"
            ),
            'element' => $element
        );
    }

    return array(
        'component' => $component,
        'stickerDataCollection' => $stickerDataCollection
    );
}















那么可能又有小可爱问,我文件好多哦,我每次有修改保存都敲命令,那不是烦死人了吗。这个问题确实问得好,是我也不会这么干,一次两次可以,多了就不会那么干,没有小可爱喜欢干重复的事情,所以我们也是可以以来扩展来帮我们进行调研处理。

php cs fixer

这个扩展已经内置 php-cs-fixer.phar

扩展大概配如下

{
    "php-cs-fixer.executablePath": "php-cs-fixer.phar", // 剛剛下載的 php-cs-fixer.phar
    "php-cs-fixer.executablePathWindows": "",   // 同上,应该是 Window 平台的
    "php-cs-fixer.onsave": false, // 保存前自动修复
    "php-cs-fixer.formatHtml": true, // 这个就不错,可以格式化修复 PHP 与 HTML 混合的代码
    "php-cs-fixer.rules": "@PSR2", // 规则 有@PSR1、@PSR2、
    "php-cs-fixer.config": ".php_cs;.php_cs.dist", // 配置的路径
    "php-cs-fixer.allowRisky": false, // 风险操作,不建议打开,因为修复可能会有风险的改动你的代码,正常修复是改动代码也正常执行
    "php-cs-fixer.pathMode": "override", 
默认情况下 --path-mode 设置为覆盖,这意味着,如果您通过命令参数指定文件或目录的路径,则在配置文件中提供给 Finder 的路径将被忽略。  您可以使用 --path-mode=intersection 合并来自配置文件和参数的路径:
    "php-cs-fixer.exclude": [], // 估计是排除文件
    "php-cs-fixer.autoFixByBracket": true, // 按下右花括号 } 自动修复花括号内的代码
    "php-cs-fixer.autoFixBySemicolon": false, // 按下分号键 ; 自动修复当前行代码
    "php-cs-fixer.documentFormattingProvider": true
}

要想让代码整齐规范,实际上主要是相关规则在推动着,像上面用命令后的小伙伴们,可能刚执行时会有疑问,为什么执行了修复跟我执行修复的差了一点点,其实是因为我使用了我自己的配置,可配置有很多,具体可以查看

https://cs.symfony.com/doc/rules/,下面是我自己使用的配置。

<?php

return PhpCsFixer\Config::create()
    ->setRules(array(
        '@PSR1' => true,
        '@PSR2' => true,
        'array_indentation' => true,
        'array_syntax' => array('syntax' => 'long'),
        'combine_consecutive_unsets' => true,
        'method_separation' => true,
        'no_multiline_whitespace_before_semicolons' => true,
        'single_quote' => true,
        'dir_constant' => true,
        'binary_operator_spaces' => array(
            'align_double_arrow' => false,
            'align_equals' => false,
        ),
        'blank_line_before_statement' => true,
        'braces' => array(
            'allow_single_line_closure' => true,
        ),
        'concat_space' => array('spacing' => 'one'),
        'declare_equal_normalize' => true,
        'function_typehint_space' => true,
        'hash_to_slash_comment' => true,
        'include' => true,
        'lowercase_cast' => true,
        'no_extra_consecutive_blank_lines' => array(
            'curly_brace_block',
            'extra',
            'parenthesis_brace_block',
            'square_brace_block',
            'throw',
            'use',
        ),
        'no_multiline_whitespace_around_double_arrow' => true,
        'no_spaces_around_offset' => true,
        'no_whitespace_before_comma_in_array' => true,
        'no_whitespace_in_blank_line' => true,
        'object_operator_without_whitespace' => true,
        'single_blank_line_before_namespace' => true,
        'ternary_operator_spaces' => true,
        'trim_array_spaces' => true,
        'unary_operator_spaces' => true,
        'whitespace_after_comma_in_array' => true,
    ))
    ->setLineEnding("\n")
    ->setRiskyAllowed(true);

我印象中记得 WordPress 官方也有一份含括 PHP HTML CSS JavaScript 代码风格的文档,但忘记地址地址在哪了,下次找到补充。这不得不又再次说回 PHP Storm ,真不愧是专业 IDE ,默认就内置有 WordPress 的那套风格可选。

PHP Storm 代码风格设置界面
PHP Storm 代码风格设置界面

驼峰命名法还是下划线命名法

不知道你们有没有这种困惑,曾经有一段时间我在选择命名法的时候也很迷惑,在 WordPress 的程序里大量使用了下划线的命名,但在其他开源程序里却有主要使用驼峰命名法,我个人也是更倾向驼峰。给我造成迷惑的原因是,这个 PHP 到底是哪种命名法才是合适?后来我是想明白了,别管哪种风格也放弃自身风格,因时制宜,程序主要用什么命名法就跟着它使用哪种,保持跟它一致性。

打不过就加入
人多就加入

最后

虽然名为 WordPress 开发技巧,但部分内容也可以挺升为 PHP 或其他语言技巧,如 ESlint 也是一种用来规范 JavaScript 的, CSS 也有根据模型书写属性的排序,叫什么 order 来着,忘了。

这是我的第一篇关于 WordPress 开发的文章,我是喜欢一两句后概括完毕的人,不知不觉写了这么多,昨晚写的时候也是正发愁,才写了几行就写不下去了,看了一遍连鄙人都觉得能分享东西不是很多,都是关于技巧与编写修养的事。可能有小可爱觉得没什么用,那就当我放屁。如果你也有其他好的开发技巧可以留言分享交流。

文 字 互 动

    有您的互动,生活更有趣

    Tips: 支持匿名免邮留言。填写邮箱地址有利于对各位靓仔/女进行消息通知。留言头像服务来自Gravatar

    留言者基本信息 匿名訪客
    匿名訪客
    留言主要内容
    Sticker Heo on wordpress, Get !!!!
    再见呲牙笑微笑亲亲愤怒惊吓尴尬捂嘴笑捂脸生病绿帽鼓掌抠鼻感动吐血鬼脸擦汗惊讶恶心禁言睡觉笑哭思考疑问奋斗耍酷吵架眩晕哭泣开心害羞喜欢烦恼爆炸熬夜吃瓜阴险狗头滑稽被打哈士奇大笑加班唱歌纠结发红包送福牛年进宝狗头围脖狗头花狗头草头秃狗头胖次我看好你好的好奇偷偷看危险小丑引起不适滑稽喝水熊猫熊猫唱歌打牌哈士奇失去意识应援熊猫喜欢疼痛勉强笑看穿一切滑稽狂汗不好意思菜狗难以置信月饼滑稽被子倚墙笑出家人菜狗花黑线呦吼有没有搞错打咩扶额深思3d眼镜电话托腮裂开滑稽柠檬伞兵胡子小偷智慧的眼神滑稽奶茶
    Kaomojis 颜字

    Σ(っ °Д °;)っ  惊吓w(゚Д゚)w  啊啊(°ཀ°)  吐血(⊙﹏⊙)  呃呃呃o(≧口≦)o  崩溃(´•︵•`)  难过(;´༎ຶД༎ຶ`)  哭死→_→  斜眼看( ̄_, ̄ )  不屑( *︾▽︾)  陶醉(* ̄3 ̄)╭  飞吻o( ̄┰ ̄*)ゞ  不好意思(。・_・。)ノ  对不起φ(≧ω≦*)♪  乐(*^▽^*)  开心(๑╹◡╹)ノ  高兴*´∀`)´∀`)*´∀`)*´∀`)  哈哈哈哈ヽ(✿゚▽゚)ノ  好耶(๑•̀ㅂ•́)و✧  棒Ψ( ̄∀ ̄)Ψ  美味

    验证码加载中....

    BACK TO TOP