作者: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就可以了。 完美~~
作者: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
作者: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=2a30af203a7bea28ea99c8ec858bab2f&t=675e1b69"
}
}
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');
作者:matrix
发布时间:2015-07-31
分类:Wordpress 零零星星
WordPress缓存类WP_Object_Cache将数据缓存在内存中,每次请求,都会重新生成缓存。如果服务器支持内存缓存,如memcache 将会提高效率(相同页面处的多次查询数据)。减少数据库的请求次数。流量不大的用处也就不是很明显。
总的来说,没啥用。留作零碎记录
相关函数: 阅读剩余部分 »
作者:matrix
发布时间:2015-05-29
分类:Wordpress 兼容并蓄
WordPress后台选项 外观-〉菜单处可以给导航栏自定义URL,但是个别链接需要添加rel="nofollow"的时候会发现没有办法。其实WordPress是有这个选项的,只是隐藏了。
点击顶部的“显示选项”展开, 链接关系网(XFN)处打勾就可以了。
如果是4.2的版本会无法点击“显示选项” ,可以审查元素手动修改DOM来临时解决问题: 阅读剩余部分 »
作者: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;}
作者: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
作者: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
- 1
- 2
- 3
- 4
- 5
... - 9