WordPress 页面免密钥插入地图

WordPress 页面免密钥插入地图

我们在 WordPress 建站场景应用中很多时候会用到地图功能,来介绍区位以便更好更直观的标识某个位置的所在地。最简单的方法就是直接把地标位置在地图中截图,以图片的形式展示出来。但这种方法似乎对用户不太友好,不能互动。在奶爸建站的QQ群(群号:774633089)里有个网友问过能不能在WordPress中插入地图,我当时的回答是可以,利用地图API就行。自己也没去深究这个问题,今天没事就看了看,对比了百度地图、高德地图、腾讯地图,引用的时候基本都需要注册账号,然后申请 key ,引用都很麻烦,这里简绍一个不需要密钥的 api —— 高德地图。

获取高德地图引用代码

打开高德地图生成器:https://lbs.amap.com/console/show/tools,按步骤创建地图,功能很丰富。
WordPress 页面免密钥插入地图
可以编辑地图样式,按照自己的喜好修改地图的外观,地图的宽和高、地图上显示的按钮(缩放、缩略图、比例尺)、鼠标和键盘对地图的操作等,一般默认即可。
WordPress 页面免密钥插入地图
设置好后点击“获取代码”按钮,生成地图引用代码。

生成引用地图 HTML 文件

把上一步生成的代码保存为一个 HTML 文件,如 amap.html,我们把它上传到网站的根目录下,在浏览器中打开,就可以看到自己定义的高德地图了。

将地图插入 WordPress 页面中

打开你想要插入地图的页面,输入以下代码。(如果你使用的古腾堡编辑器,更改区块格式为“自定义HTML”)

这样我们就吧地图嵌入到网页中了,当然地图的宽高、在网页中显示的位置可自己写CSS调整,也可简单地像我只调整宽和高。

在 amap.html 文件中将 width:600px 修改为 width:100%,如下:

.my-map { margin: 0 auto; width: 100%; height: 600px; }

在页面的引用中,也作相应调整,如下:

搞定,如果你想更进一步,自己慢慢琢磨。官方也给出了各种主题样式,请移步

WordPress图片上传自动重命名

[info]正常情况下WordPress在上传图片时候,文件名是什么上传之后就是什么。随着时间推移,图片越来越多,难免会出现重复。最新上传的文件,就会替代院线的文件,造成不必要的麻烦。而且WordPress图片上传对中文文件名不太友好,有时候会无法正常显示。我们可以让上传的文件都自动重命名,来解决这个麻烦![/info]

一、根据上传时间重命名文件

add_filter('wp_handle_upload_prefilter', 'custom_upload_filter' );
function custom_upload_filter( $file ){
	$info = pathinfo($file['name']);
	$ext = $info['extension'];
	$filedate = date('YmdHis').rand(10,99);//为了避免时间重复,再加一段2位的随机数
	$file['name'] = $filedate.'.'.$ext;
    return $file;
}

二、使用md5转码文件名

add_filter('wp_handle_upload_prefilter', 'custom_upload_filter' );
function custom_upload_filter( $file ){
	$info = pathinfo($file['name']);
	$ext = '.' . $info['extension'];
	$md5 = md5($file['name']);
    $file['name'] = $md5.$ext;
    return $file;
}

我们可以选择其中一个办法添加到当前主题functions.php文件中,以后添加附件、图片的时候就会自动重命名。

控制 WordPress 文章的发布间隔时间

有时候大家发布文章的时候可能是一有时间就会连着发布好几篇,但每篇文章的发布时间有一定时间间隔或许更适合读者。实现方法很简单,如下:

将代码添加到当前主题的 functions.php 文件中:

//设定每篇文章的发布间隔
function force_time_between_posts($data, $postarr) {
global $wpdb;
if (empty($postarr['ID'])) return $data;
$latest = $wpdb->get_var("
SELECT post_date
FROM {$wpdb->posts} 
WHERE post_status IN('future','publish') 
AND post_type = 'post' 
AND ID != {$postarr['ID']}
ORDER BY post_date DESC
LIMIT 1");
$distance = 60; // 时间间隔(分钟)
$latest = strtotime($latest);
$current = strtotime($data['post_date']);
if ($latest < $current) {
$diff = $current - $latest;
} else { 
$diff = 0;
}
if ($diff >= 0 && $diff < ($distance * 60)) {
$new_date = $latest + ($distance * 60);
$date = date('Y-m-d H:i:s',$new_date);
$date_gmt = get_gmt_from_date($date);
$data['post_date'] = $date;
$data['post_date_gmt'] = $date_gmt;
$data['post_status'] = 'future';
}
return $data;
}
add_action('wp_insert_post_data','force_time_between_posts',1,2);

发布新文章时,会自动检测上一篇文章的发布时间,如果超过60分钟,就直接发布,如果小于60分钟,就自动定时间隔60分钟发布。需要注意的是,所检测的是所有已发布和定时发布的文章中的最后一篇。

WordPress图片压缩插件:Compress JPEG & PNG images

也许 Compress JPEG & PNG images 插件你没用过,但是你一定用过一个在线图片压缩的网站:TinyJPG(https://tinyjpg.com)

就是这只熊猫,见过没?用过吧!很好用吧?今天推荐的WordPress 插件就是由TinyJPG开发的Compress JPEG & PNG images

插件介绍:

将图像上传到WordPress网站后,每个已调整大小的图像都会上传到TinyJPG或TinyPNG服务。分析您的图像以应用最佳可能的优化。根据图像的内容,选择最佳策略。结果将发送回您的WordPress网站,并将原始图像替换为一个较小的原始图像。平均而言,JPEG图像压缩40-60%,PNG图像压缩50-80%,质量没有明显损失。您的网站将为您的访问者加载更快,您将节省存储空间和带宽!

  • 上传时自动优化新图像。
  • 高级背景优化,可加快您的工作流程。
  • 优化媒体库中已有的单个图像。
  • 轻松批量优化现有媒体库。
  • 通过设置最大宽度和/或高度来调整大型原始图像的大小。
  • 使用渐进式JPEG编码更快地显示JPEG图像。
  • 保留原始图像中的版权元数据,创建日期和GPS位置。
  • 支持压缩动画PNG。
  • 选择可以优化图像的缩略图大小。
  • 使用单个API密钥的多站点支持。

使用方法:

安装好插件之后进入插件设置,第一次使用需要注册一个API,推荐使用Gmail邮箱。免费版每个月可以压缩500张图片,一般的博客应该是够用了。

设置的时候,注意这里的裁剪大小两项取消掉,其他保持默认就行。

下载地址:

官方地址:https://wordpress.org/plugins/tiny-compress-images/

WordPress 根据访问设备使用不同的主题

根据访问设备的不同,区分开浏览器版本和PC与移动端,代码如下:

function ws_switch_theme($theme){
    global $is_IE;
    if($is_IE){
        preg_match('/MSIE\s(\d)\.0;/', $_SERVER['HTTP_USER_AGENT'], $matches);
        $IEversion = $matches[1];
        if($IEversion=6){
            $theme='twentyten';//IE 6 
        }
        if($IEversion=7){
            $theme='twentyeleven';//IE 7
        }
        if($IEversion=8){
            $theme='twentytwelve';//IE 8
        }
    }
    if(wp_is_mobile()) {
        $theme='twentytwelve';//移动端
    }
    return $theme;
}
add_filter( 'template', 'ws_switch_theme' );
add_filter( 'stylesheet', 'ws_switch_theme' );

你可以根据上面的代码自行修改,在何种设备访问时加载什么主题。注意主题名字一定是主题文件夹名字,而不是后台管理界面你看到的主题名字。
请勿直接添加到主题的 functions.php 中,无法生效。

使用方法:

1.在 Code Snippets 插件 中添加此段代码
插件下载地址:https://tw.wordpress.org/plugins/code-snippets/

2.把代码写成插件,安装!(反正我是不会,有能力的自己去写吧!)

免插件实现 WordPress 文章自动添加标签

将以下代码粘贴到 function.php 中:

// WordPress 自动为文章添加已使用过的标签
function array2object($array) { // 数组转对象
  if (is_array($array)) {
    $obj = new StdClass();
    foreach ($array as $key => $val){
      $obj->$key = $val;
    }
  }
  else {
    $obj = $array;
  }
  return $obj;
}
function object2array($object) { // 对象转数组
  if (is_object($object)) {
    foreach ($object as $key => $value) {
      $array[$key] = $value;
    }
  }
  else {
    $array = $object;
  }
  return $array;
}
add_action('save_post', 'auto_add_tags');
function auto_add_tags(){
  $tags = get_tags( array('hide_empty' => false) );
  $post_id = get_the_ID();
  $post_content = get_post($post_id)->post_content;
  if ($tags) {
    $i = 0;
    $arrs = object2array($tags);shuffle($arrs);$tags = array2object($arrs);// 打乱顺序
    foreach ( $tags as $tag ) {
    // 如果文章内容出现了已使用过的标签,自动添加这些标签
      if ( strpos($post_content, $tag->name) !== false){
        if ($i == 5) { // 控制输出数量
          break;
        }
        wp_set_post_tags( $post_id, $tag->name, true );
        $i++;
      }
    }
  }
}

WordPress高效正确的管理 functions.php 文件

大家在折腾wordpress的过程中,很多时候会根据自己的需求来对主题进行修改。大部分功能的实现都与 functions.php 这个文件有关系,把代码直接加到 functions.php 中就可以实现某项功能。但是在主题更新后修改的内容都会被覆盖,又要花时间重新添加。介绍两个解决这个方法:

方法一、引入其他 functions.php 文件

为 WordPress 引入其他 functions.php 文件,将下面的内容保存为 utf-8 格式的 php 文件,并起名为 functions-max.php(叫什么名字你自己随便改),放入与修改主题的 functions.php 文件相同的目录中。


然后在 functions.php 中加入以下代码,在主题更新后或者更换主题了,只需要在主题 functions.php 文件中加入下面这段代码就可以了。

//引入其它functions.php文件
@include(TEMPLATEPATH.'/functions-max.php');

最后把你要添加的功能代码,在functions-max.php中添加就可以了。

方法二、将功能代码存为一个个独立的 php 文件来管理

第一步:在主题文件夹下新建一个名为 inc 的文件夹

第二步:将以下代码加入到当前主题的 functions.php 文件中,代码如下:

define('INC', TEMPLATEPATH.'/inc');
IncludeAll( INC );
function IncludeAll($dir){
    $dir = realpath($dir);
    if($dir){
        $files = scandir($dir);
        sort($files);
        foreach($files as $file){
            if($file == '.' || $file == '..'){
                continue;
            }elseif(preg_match('/.php$/i', $file)){
                include_once $dir.'/'.$file;
            }
        }
    }
}

以后每次为主题扩展功能的时候只要将代码保存为一个新的 php 文件,文件名不限,但最好是英文或数字,然后将文件放入到 inc 目录下即可。

方法三、使用Code Snippets插件

Code Snippets是一款可以简单、干净、安全添加php代码到你网站的插件,适合新手用户使用,可以自动检查代码格式。使用很简单,插件使用方法请移步:安全添加代码到functions.php文件的方法:Code Snippets
插件下载地址:https://tw.wordpress.org/plugins/code-snippets/

Pure-Highlightjs 轻量级WordPress代码高亮插件

个人博主难免要折腾代码,分享折腾心得的时候代码高亮是必不可少的功能。如果你不喜欢那些功能复杂的插件,我们今天推荐一个仅有84kb的代码高亮插件 Pure-Highlightjs 。基于Highlightjs 实现,支持多种语言高亮,还提供多种样式。Github 项目地址:https://github.com/icodechef/Pure-Highlightjs

编辑器按钮,方便直接插入

语言选择

后台设置插件样式

可选样式很多,根据自己主题选择。

虽然很轻巧,但也有缺陷。Pure Highlightjs 只能在 WordPress 默认编辑器内使用并且不支持行号。

下载地址:

Github:Pure Highlightjs

退出移动版