Wordpress专题 第15页

现在大部分 WordPress 主题其实都自带侧边栏随窗口浮动功能，但这类需求依然存在，今天小编教你如何不用 WordPress 插件轻松实现。

操作流程：

<script type="text/javascript">
   var documentHeight = 0;
   var topPadding = 15;
   $(function () {
      var offset = $("#sidebar").offset();
      documentHeight = $(document).height();
      $(window).scroll(function () {
         var sideBarHeight = $("#sidebar").height();
         if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 368);
            if (newPosition > maxPosition) {
               newPosition = maxPosition;
            }
            $("#sidebar").stop().animate({
               marginTop: newPosition
            });
         } else {
            $("#sidebar").stop().animate({
               marginTop: 0
            });
         };
      });
   });
</script>

本文由 云模板 作者：PetitQ 发表，转载请注明来源！

如果想在 WordPress 文章段落后添加自定义内容，比如在文章第二段后添加广告，可以尝试用下面的代码：

// 在文章第二段之后插入内容
    add_filter( 'the_content', 'prefix_insert_post_ads' );
    function prefix_insert_post_ads( $content ) {
    	$ad_code = '<div>添加的文字</div>';
    	if ( is_single() && ! is_admin() ) {
    		return prefix_insert_after_paragraph( $ad_code, 2, $content );
    	}
    return $content;
    }
 
    // 主要函数
    function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    	$closing_p = '</p>';
    	$paragraphs = explode( $closing_p, $content );
    	foreach ($paragraphs as $index => $paragraph) {
    		if ( trim( $paragraph ) ) {
    			$paragraphs[$index] .= $closing_p;
    		}
    		if ( $paragraph_id == $index + 1 ) {
    			$paragraphs[$index] .= $insertion;
    		}
    	}
    	return implode( '', $paragraphs );
    }

分别在段落 2、4、6 后面添加不同的内容

 add_filter( 'the_content', 'add_ads_to_content' );
    function add_ads_to_content( $content ) {
    	$ads = array(
    		2 =>  'ad code 1', // paragraph_id => ad_code
    		4 => 'ad code 2', // paragraph_id => ad_code
    		6 => 'ad code 3' // paragraph_id => ad_code
    	);
 
    	if ( is_single() && ! is_admin() ) {
    		foreach ($ads as $paragraph_id => $ad_code) {
    			$content = prefix_insert_after_paragraph( $ad_code, $paragraph_id, $content );
    		}
    	}
    	return $content;
    }
 
    function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    	$closing_p = '</p>';
    	$paragraphs = explode( $closing_p, $content );
    	foreach ($paragraphs as $index => $paragraph) {
    		if ( trim( $paragraph ) ) {
    			$paragraphs[$index] .= $closing_p;
    		}
    		if ( $paragraph_id == $index + 1 ) {
    			$paragraphs[$index] .= $insertion;
    		}
    	}
    	return implode( '', $paragraphs );
    }

如果只显示在某个分类文章中添加，也可以这么写

add_filter( 'the_content', 'prefix_insert_post_ads' );
    function prefix_insert_post_ads( $content ) {
    	$ad_code = '<div>自定义文字</div>';
    		if ( is_single() && ! is_admin() && in_category('29') ) {
    		return prefix_insert_after_paragraph( $ad_code, $content );
    	}
    	return $content;
    }
 
 
    function prefix_insert_after_paragraph( $insertion, $content ) {
    	$closing_p = '</p>';
    	$paragraphs = explode( $closing_p, $content );
    	$paragraph_id = round(count($paragraphs) / 2);
    	foreach ($paragraphs as $index => $paragraph) {
    		if ( trim( $paragraph ) ) {
    			$paragraphs[$index] .= $closing_p;
    		}
    		if ( $paragraph_id == $index + 1 ) {
    		$paragraphs[$index] .= $insertion;
    		}
    	}
    	return implode( '', $paragraphs );
    }

PWA 是 Progressive Web App 的英文缩写， 翻译过来就是渐进式增强 WEB 应用， 是 Google 在 2016 年提出的概念，2017 年落地的 web 技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。我们可以在 Chrome 中安装，如图：

移动端也是会提示安装的，这个功能如何实现，如果你是用的 WordPress，那么只要一款插件就可以瞬间实现网站支持 PWA，这款插件就是 SuperPWA。wordpress 的插件后台有很多支持 PWA 的，不过 SuperPWA 用的人最多，使用也很简单，而且卸载插件也很干净，不写数据库，所以说这款插件让人稍微放心点。

一：安装

自己在 WordPress 后台的插件库中搜索 SuperPWA，即可找到：

大鸟估计中间这款 PWA 也不错，用的人也很多，不过我们还是用 SuperPWA，毕竟用过的，知道怎么搞。

二：设置

安装启用之后，我们需要设置插件了，最核心的要设置好应用图标和启动画面图标这两个：

应用图标：这将是您的应用程序安装在手机上的图标。必须是 PNG 完全相同的图像 192×192 像素。
启动画面图标：此图标将显示在支持的设备上的应用程序的初始屏幕上。必须是 PNG 完全相同的图像 512×512 像素。
应用名称这些要写成自己网站名，其他的都是默认设置就可以了，设置好之后是这个样子的：

设置好之后，保存，插件我自动帮助我们的 wordpress 网站生成支持 PWA 应用。就是大鸟一开始介绍的样子，可以在浏览器中安装。

三：ADD-ONS

我们看到插件还有一个 add-ons 选项，这里可以酌情选择，比如选择苹果触摸图标：如图：

当然，都不选择也没关系。随意、随意、随意！

四：效果

PC 端安装好的效果：

安装好之后，就会在桌面生成一个的 APP。

移动端：用 chrome 打开网站之后，会在底部跳出安装的选项：

选择安装即可，之后会在手机桌面生成一个 APP，额，感觉还不错。

五：总结

目前有很多博客和网站都支持了 PWA，Wordpress 站点支持 PWA 还是很简单的，下载一个 PWA 插件即可，如果非 WordPress 站点，那么就的自己去设置了。

至于想深入了解 PWA，自己去搜索文档查看吧，虽然 PWA 很有意思，但也没想象中的那么好，不过玩玩也是可以的。

Smartideo 2 是一个全新的版本。它改进了引用方式，对支持 iframe 引用的视频网站直接采用 iframe 的方式引用；增加了播放器响应式的支持，在不同设备的屏幕下调整到最佳的播放器大小，使页面更加和谐。这两项改进，解决了开启 CDN 缓存的博客出现渲染出来的播放器跨屏出现错乱的问题，这只是顺带解决的，更重要的是让跨屏的播放体验更加友好了，在各种设备越来越多的今天，跨屏体验是非常非常重要滴~

Smartideo 是为 WordPress 添加对在线视频支持的一款插件（支持手机、平板等设备HTML5播放）。 目前支持优酷、搜狐视频、土豆、56、腾讯视频、新浪视频、酷6、华数、乐视、YouTube 等网站。

直接粘贴视频播放页完整的URL到编辑器（单独一行），就可以加载视频播放器。

以上介绍摘自原作者。

作者上一次更新是去年等9月份，之后也没更新，目前b站的视频添加后无法播放。

最近，我们修复了插件b站视频的问题，有需要的盆友可自取食用。

https://github.com/pcdotfan/smartideo

b 站的视频，要在本站播放，需要按以下设置：

这是一款比较简约的代码高亮插件，用起来也很方便，支持经典编辑器和古登堡编辑器。

配色也很听讨好，不挑网站，操作非常简单，在编辑器中，均有对应的按钮来操作，代码复制进去就可以，另外还支持显示代码的对应语言。

以下演示一下：

Hello world!

插件使用教程

有时我们需要查看某篇文章或者分类的 ID，需要将鼠标放在文章或者分类名称上，然后查看浏览器状态栏上链接中的数字才能获得 ID 号，不够直观，可以将下面的代码添加到当前主题 functions.php 文件中，之后会在后台文章、分类等列表后面直接显示 ID 号：

// Prepend the new column to the columns array
    function ssid_column($cols) {
        $cols['ssid'] = 'ID';
        return $cols;
    }
    // Echo the ID for the new column
    function ssid_value($column_name, $id) {
        if ($column_name == 'ssid')
            echo $id;
    }
    function ssid_return_value($value, $column_name, $id) {
        if ($column_name == 'ssid')
            $value = $id;
        return $value;
    }
    // Output CSS for width of new column
    function ssid_css() {
    ?>
    <style type="text/css">
        #ssid { width: 50px; } /* Simply Show IDs */
    </style>
    <?php
    }
    // Actions/Filters for various tables and the css output
    function ssid_add() {
        add_action('admin_head', 'ssid_css');
        add_filter('manage_posts_columns', 'ssid_column');
        add_action('manage_posts_custom_column', 'ssid_value', 10, 2);
        add_filter('manage_pages_columns', 'ssid_column');
        add_action('manage_pages_custom_column', 'ssid_value', 10, 2);
        add_filter('manage_media_columns', 'ssid_column');
        add_action('manage_media_custom_column', 'ssid_value', 10, 2);
        add_filter('manage_link-manager_columns', 'ssid_column');
        add_action('manage_link_custom_column', 'ssid_value', 10, 2);
        add_action('manage_edit-link-categories_columns', 'ssid_column');
        add_filter('manage_link_categories_custom_column', 'ssid_return_value', 10, 3);
        foreach ( get_taxonomies() as $taxonomy ) {
            add_action("manage_edit-${taxonomy}_columns", 'ssid_column');
            add_filter("manage_${taxonomy}_custom_column", 'ssid_return_value', 10, 3);
        }
        add_action('manage_users_columns', 'ssid_column');
        add_filter('manage_users_custom_column', 'ssid_return_value', 10, 3);
        add_action('manage_edit-comments_columns', 'ssid_column');
        add_action('manage_comments_custom_column', 'ssid_value', 10, 2);
    }
    add_action('admin_init', 'ssid_add');