HHTjim'S 部落格

开发环境配置本地自签SSL证书

作者：matrix 发布时间：2024-06-20 分类：Linux PHP Wordpress

项目地址：https://github.com/FiloSottile/mkcert

本地开发环境有时候需要模拟真实的https环境，那就必须得配置SSL证书了。自签SSL证书就可以搞定，这回尝试用mkcert工具生成和配置自签SSL证书。

安装mkcert

本地是 mac 环境，直接用brew安装

brew install mkcert

信任自签根证书

安装并让系统信任mkcert的自签根证书。

mkcert -install 

创建证书

mkcert "*.security.local"  localhost 127.0.0.1 ::1

security.local就是我本地开发环境运行的域名
127.0.0.1 ::1 是对应的本地 IPV4 IPV6
创建的证书和私钥文件会保存在当前目录中

配置Nginx

正常配置nginx文件（e.g. /etc/nginx/nginx.conf）
添加内容：

server {
    listen 443 ssl;
    server_name localhost;

    ssl_certificate /path/to/localhost.pem;
    ssl_certificate_key /path/to/localhost-key.pem;

    # ...其余配置保持不变
}

# 可以选择添加一个额外的服务器块来处理 HTTP 到 HTTPS 的重定向
server {
    listen 80;
    server_name localhost;
    return 301 https://$host$request_uri;
}

说明：

/path/to/localhost.pem
/path/to/localhost-key.pem
这俩路径是证书和密钥文件位置

之后重启或者 reload nginx就可以了。 完美～～

wordpress修改默认的媒体播放器

作者：matrix 发布时间：2019-03-07 分类：Wordpress 零零星星

本来几乎少有在blog上放置音乐，但是看到之前的帖子的哪个音频播放UI简直难受的很，已经记不起WP是从多少版本开始有这种协调默认的媒体播放界面。刚开始应该是使用html5的默认audio播放界面，后面就使用MediaElement.js的播放器且覆盖了样式，默认都是黑色调的蓝/白色进度条的那种。

音频播放界面如上图样子，早就该改了的 实在难受 😱 😱
下面的代码来自@Vassilis Mastorostergios
，style很好看 也就照教程搬过来用了。
修改后的样式：

添加样式文件

主题css目录下新建文件my-theme-player.css

/* Media Element Player styles */

/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
    background-color: #efefef;
}

/* Playmejs-time-floater controls */
.mytheme-mejs-container .mejs-button > button {
    background-image: url(images/mejs-controls-dark.svg);
}

.mytheme-mejs-container .mejs-time {
    color: #888888;
}

/* Progress and audio bars */

/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
    background-color: #fff;
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
    background-color: rgba(219, 78, 136, 0.075);
}

/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
    background: #db4e88;
}

/* Reduce height of the progress and audio bars */
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-loaded,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
    height: 3px;
}

.mytheme-mejs-container .mejs-time-handle-content {
    top: -6px;
}

.mytheme-mejs-container .mejs-time-total {
    margin-top: 8px;
}

.mytheme-mejs-container .mejs-horizontal-volume-total {
    top: 19px;
}

/* WordPress audio playlist styles */

.wp-playlist-light {
    box-shadow: 3px 3px 0 #e2e2e2;
}

/* Captions - Track titles / subtitles, time */
.wp-playlist-light .wp-playlist-caption,
.wp-playlist-light .wp-playlist-item-length {
    color: #787878;
}

/* Captions - Current track */
.wp-playlist-light .wp-playlist-current-item .wp-playlist-item-title {
    font-size: 16px;
}

.wp-playlist-light .wp-playlist-item-album {
    font-style: normal;
}

.wp-playlist-light .wp-playlist-item-artist {
    text-transform: none;
    opacity: .8;
}

/* Playlist items */
.wp-playlist-light .wp-playlist-item {
    padding: 10px 0;
    border-bottom-color: #efefef;
}

.wp-playlist-light .wp-playlist-item:last-child {
    padding-bottom: 0;
}

.wp-playlist-light .wp-playlist-playing {
    font-weight: normal;
    border-bottom-color: #db4e88;
}

.wp-playlist-light .wp-playlist-item-length {
    top: 10px;
}

/*调整优化*/
.mejs-time-float,.mejs-time-float-current,.mejs-time-float-corner{
    border:none ;
    color: #888888; /*设置文字颜色*/
}
.wp-audio-shortcode a,.wp-playlist a{
    border-bottom:none; /*去除主题的a标签全局下划线*/
}

说明：
调整优化部分是我自行添加的，主要是避免和本主题的样式冲突

添加svg播放图标

mejs-controls-dark.svg放置在主题css/images目录下css/images/mejs-controls-dark.svg
下载：
https://d.pr/f/Y83MD
https://pan.baidu.com/s/14P4TOe1StJQfoRHgAmMrkg#提取码: 4pjf

挂载脚本

functions.php适当位置添加css和js加载的钩子

//加载之前新建的my-theme-player.css文件
//判断启用wp-mediaelement才会加载  避免多余的资源请求 
add_action( 'wp_footer', 'ci_theme_footer_scripts' );

function ci_theme_footer_scripts() {
    if ( wp_style_is( 'wp-mediaelement', 'enqueued' ) ) {
        wp_enqueue_style( 'my-theme-player', get_template_directory_uri() . '/css/my-theme-player.css', array(
            'wp-mediaelement',
        ), '1.0' );
    }
}

//给MediaElementJs播放器添加自定义样式mytheme-mejs-container  用于重写系统自带css
/**
 * Add an HTML class to MediaElement.js container elements to aid styling.
 *
 * Extends the core _wpmejsSettings object to add a new feature via the
 * MediaElement.js plugin API.
 */
add_action( 'wp_print_footer_scripts', 'mytheme_mejs_add_container_class' );

function mytheme_mejs_add_container_class() {
    if ( ! wp_script_is( 'mediaelement', 'done' ) ) {
        return;
    }
    ?>
    <script>
        (function() {
            var settings = window._wpmejsSettings || {};
            settings.features = settings.features || mejs.MepDefaults.features;
            settings.features.push( 'exampleclass' );
            MediaElementPlayer.prototype.buildexampleclass = function( player ) {
                player.container.addClass( 'mytheme-mejs-container' );
            };
        })();
    </script>
    <?php
}

PEACE～

参考：
https://www.cssigniter.com/css-style-guide-for-the-default-WordPress-media-player/
https://codex.WordPress.org/Playlist_Shortcode

wp替换emoji源地址s.w.org

作者：matrix 发布时间：2017-01-11 分类：Wordpress 零零星星

wp的页面都会加载类似下面的的javascript代码用来显示emoji表情。

{
    "baseUrl": "https://s.w.org/images/core/emoji/2.2.1/72x72/",
    "ext": ".png",
    "svgUrl": "https://s.w.org/images/core/emoji/2.2.1/svg/",
    "svgExt": ".svg",
    "source": {
        "concatemoji": "https://static.hhtjim.com/wp-includes/js/wp-emoji-release.min.js?ver=dd887&sign=24812dfd79f2a09f1cdd19461747a22a&t=673ef445"
    }
}

s.w.org毕竟是墙外的东西，很麻烦。将其替换为国内镜像地址。
WordPress functions中添加

替换emoji源  s.w.org
function filter_baseurl()
{
    return set_url_scheme('//twemoji.maxcdn.com/72x72/');

}

function ilter_svgurl()
{
    return set_url_scheme('//twemoji.maxcdn.com/svg/');
}

add_filter('emoji_url', 'filter_baseurl');
add_filter('emoji_svg_url', 'ilter_svgurl');

WordPress缓存类WP_Object_Cache

作者：matrix 发布时间：2015-07-31 分类：Wordpress 零零星星

WordPress缓存类WP_Object_Cache将数据缓存在内存中，每次请求，都会重新生成缓存。如果服务器支持内存缓存，如memcache 将会提高效率（相同页面处的多次查询数据）。减少数据库的请求次数。流量不大的用处也就不是很明显。
总的来说，没啥用。留作零碎记录

相关函数： 阅读剩余部分 »

wordpress导航菜单链接处添加nofollow

作者：matrix 发布时间：2015-05-29 分类：Wordpress 兼容并蓄

WordPress后台选项  外观-〉菜单处可以给导航栏自定义URL，但是个别链接需要添加rel="nofollow"的时候会发现没有办法。其实WordPress是有这个选项的，只是隐藏了。

点击顶部的“显示选项”展开， 链接关系网（XFN）处打勾就可以了。

如果是4.2的版本会无法点击“显示选项” ，可以审查元素手动修改DOM来临时解决问题： 阅读剩余部分 »

博客标题下面的ajax加载一句话

作者：matrix 发布时间：2015-01-12 分类：Wordpress 兼容并蓄

博客LOGO下面的一句话功能是照搬philna2主题弄的，点击一下就更新一句话的内容，是很久前的弄的小功能，现在回忆一下简单步骤。给需要的一位童鞋。

1.在wordpress主题的functions.php中添加代码

function HHTJimSay(){
    $Sentence =
    '
    11111
    22222
    33333
    44444
    ';
    $words = explode("\n", $Sentence);
    $word = $words[ mt_rand(1, count($words) - 2) ];
    echo $word;
}
function _exitajax(){
exit();
}
function Is_AjaxURL() {
    if((isset($_GET['do']) && $_GET['do'] == 'ajax') ) {
        return true;
    }else{
        return false;
    }
}
/**
 * 通过USER_Agent判断是否为机器人.
 */
function is_bot(){
    $bots = array('Google Bot1' => 'googlebot', 'Google Bot2' => 'google', 'MSN' => 'msnbot', 'Alex' => 'ia_archiver', 'Lycos' => 'lycos', 'Ask Jeeves' => 'jeeves', 'Altavista' => 'scooter', 'AllTheWeb' => 'fast-webcrawler', 'Inktomi' => 'slurp@inktomi', 'Turnitin.com' => 'turnitinbot', 'Technorati' => 'technorati', 'Yahoo' => 'yahoo', 'Findexa' => 'findexa', 'NextLinks' => 'findlinks', 'Gais' => 'gaisbo', 'WiseNut' => 'zyborg', 'WhoisSource' => 'surveybot', 'Bloglines' => 'bloglines', 'BlogSearch' => 'blogsearch', 'PubSub' => 'pubsub', 'Syndic8' => 'syndic8', 'RadioUserland' => 'userland', 'Gigabot' => 'gigabot', 'Become.com' => 'become.com','Bot'=>'bot','Spider'=>'spider','yinheli_for_test'=>'dFirefox');
    $useragent = $_SERVER['HTTP_USER_AGENT'];
    foreach ($bots as $name => $lookfor) {
        if (stristr($useragent, $lookfor) !== false) {
            return true;
            break;
        }
    }
}
if(Is_AjaxURL() && !is_bot()){//存在_GET且不是机器
add_action('Ready','HHTJimSay');
add_action('Ready', '_exitAjax', 9999);
}
do_action( 'Ready');

说明：
用于ajax后台提取一句话函数
4-7行处自己添加需要显示的一句话

2.在header.php中，加载完jq之后的位置添加js代码

var blogURL="https://www.hhtjim.com";//网站域名  
$(function(){  
    function o(v){  
        url=v.u?v.u:blogURL+"?do=ajax";  
        if(v.fn){  
            var nowTime = new Date().getTime();  
            url+="&action="+v.fn+"&t="+nowTime  
        }  
        type=v.m?v.m:"GET";  
        data=v.d?v.d:null;  
        dataType=v.dt?v.dt:"html";  
        beforeSend=v.b?v.b:null;  
        error=v.e?v.e:function(){  
            alert(lang.commonError);  
            document.body.style.cursor="auto"  
        };  
        success=v.s?v.s:function(w){  
            alert(w)  
        };  
        $.ajax({  
            url:url,type:type,data:data,dataType:dataType,beforeSend:beforeSend,error:error,success:success  
        })  
    }  

    function u(){  
        var v=false;  
        var x=document.getElementById('HHTJimSay') ? $("#HHTJimSay") : $("#HHTJimSay_s") ;  
        var w="loading";  
        x.click(function(){  
            if(v){  
                return false  
            }  
            var z=function(){  
                x.hide(0,function(){  
                    x.attr('title','').html("").addClass(w).show();//0秒后出现漏斗  

                });  
                v=true  
            };  
            var y=function(){  
                x.html(lang.commonError);  
                x.removeClass(w);  
                v=false  
            };  
            var A=function(B){  
                setTimeout(function(){  
                    x.hide(0);  
                    x.attr('title','点击这里获取更新').html(B).removeClass(w).fadeIn("slow"); //show(300)改fadeIn("slow") 淡入  
                    v=false  
                }  
                ,3000)//3000 漏斗出现时间  
            };  
            o({  
                b:z,e:y,s:A,fn:"HHTJimSay"  
            });  
            return false  
        })  
    }  
    u();  
    function n(){  
        var w=$("#welcome_msg");  
        var v=$("#profile");  
        var m=$("#author");  
        $("#edit_profile").toggle(function(){  
            w.slideUp(200);  
            v.slideDown(200);  
            m.select();  
            return false  
        }  
        ,function(){  
            w.slideDown(200);  
            v.slideUp(200);  
            return false  
        })  
    }  
    n();  
});  

说明：修改第一行的网站域名

3.在header.php处需要显示的位置添加代码

<span id="HHTJimSay_s" title="点击这里获取更新" style="white-space: nowrap;" class="description"><?php HHTJimSay(); ?></span>

4.在style.css中添加样式代码

#HHTJimSay_s{background:url('data:image/gif;base64,R0lGODlhEAAQALMJALvM7rDE6aW86UV10leF2WWM2cXj/zNmzP///////wAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAAAJACwAAAAAEAAQAAAENDDJCUoBM+tyTtGTMAgJ50mGNhxDUl2JIWciCaZgru/avPs+XZBHLOJuvSFKeQwec8oiKAIAIfkECQAACQAsAAAAABAAEAAABDcwyZlCoJiGc26WhrR1QEEAlKGKV8ERWIi5R/FhZYHefLLyv99N2CsaZRkkiLhU+iZCZ0xqxEQAACH5BAkAAAkALAAAAAAQABAAAAQ2MMlJq5XG3KlxF4NAZR01HENVUqC4vbAEFAWQZG9xHMW9VjpeLDGrDS8/jgq3/JWYNxj0eIkAACH5BAkAAAkALAAAAAAQABAAAAQ0MMlJq5XG3KlxT58XitXIbWhaBYGHBsfRZm/cqgmrAkUBlJZCrEDJjIQHAtDFI/w2NFwqAgAh+QQJAAAJACwAAAAAEAAQAAAENDDJSauVxtypcU+fF4rVyG1oimYpC5qUq84qLAxCzAJFASSDw6AkKRwOhcQtdzEiZzyfJQIAIfkECQAACQAsAAAAABAAEAAABDUwyUmrlcbcqXFPnxeK1chtaIpmKQualKtaQFEAc3EchTUSu14gQJoACLfAjghCKQ9M1fASAQAh+QQJAAAJACwAAAAAEAAQAAAENTDJSauVxtypcU+fF4rVyG2oBBQFkErFcRRolsRzra3t61+CgeAyGhwGlkwoOAR9TBTbDxUBACH5BAUAAAkALAAAAAAQABAAAAQ4MMlJq5XGXAlIAUk2aRRxHEWVkVJxpmoFFN82BYFNBWe+ibyD7yJK4HRIJCtGWVmczRFr+aQmLREAOw==') no-repeat 10000px 10000px;cursor:pointer;}
#HHTJimSay_s.loading{cursor:default;display:none;background-position:center center;width:18px;height:16px;}

IE浏览器Ajax请求时304错误

作者：matrix 发布时间：2014-04-24 分类：Wordpress

博客LOGO下面的一句话功能是按照philna2主题弄的，点击一下就更新内容。但是每次用IE浏览器点击获取都会停留在固定的一句话，F12之后才看到是304错误。客户端代码用的jq ajax()方法，理论上是支持各种浏览器的。

今天终于解决这个问题，都是狗日的IE浏览器缓存搞的。

原因

IE浏览器ajax时会缓存之前get请求过的URL内容，如果下次还请求那个URL就从本地缓存中取出，之后也就会停止ajax请求。所以会失败，总是停留在一个请求内容里。

解决办法

请求的URL地址中加上动态值，比如UNIX时间戳。

像这样的地址  http://127.0.0.1?do=ajax&t=这里为UNIX时间戳

UNIX时间戳每秒都在变化，每次请求地址的URL都不一样，IE也就缓存不到。

js代码参考：

var nowTime = new Date().getTime();

参考：

http://blog.csdn.net/puncha/article/details/17962623

多说360度旋转css代码

作者：matrix 发布时间：2014-02-06 分类：Wordpress

多次看到多说评论的头像样式，鼠标悬停的时候360度旋转~

css：

#ds-avatar{  
    width:54px;height:54px; /*设置图像的长和宽*/  
    border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/  
    -webkit-border-radius: 27px;/*圆角效果：兼容webkit浏览器*/  
    -moz-border-radius:27px;  
    box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/  
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;  
    -webkit-transition: 0.4s;     
    -webkit-transition: -webkit-transform 0.4s ease-out;  
    transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/  
        -moz-transition: -moz-transform 0.4s ease-out;  
        }  

#ds-avatar:hover{/*设置鼠标悬浮在头像时的css样式*/  
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
    transform: rotateZ(360deg);/*图像旋转360度*/  
    -webkit-transform: rotateZ(360deg);  
        -moz-transform: rotateZ(360deg);  
    }  

说明：#ds-avatar为头像图片的样式ID。

来自：http://ifoouucode.duapp.com/37