以前一直在用Typecho，因为更新不及时的缘故换成了Wordpress，据官方说，世界上30%左右的网站用的是Wordpress，包括常用数据库Mariadb官网用的也是Wordpress，以前也玩过wordpress，但是总是玩不转，现在从Typecho更换到Wordpress也熟悉了一下，基本可以玩的转了，看了下主题，好看的主题基本都需要付费，当时也有破解版的，但总归没有我理想中的主题，然后自己看了下wordpress的主题开发，开发了本博客正在用的主题，命名为：WPcard，为什么用WPcard命名呢？因为主题大部分采用Bootstrap4中的card模块开发，并用的是wordpress程序，遂命名为WPcard。
1、主题特色：
1.1、基于Bootstrap4开发，自适应移动版
1.2、自带图片懒加载，可以卸载Lazyload插件了
1.3、自带图片轮播功能
1.4、自带右边栏广告位展示
1.5、可直接使用不依赖任何插件，可根据自己的需要安装插件
1.6、引入prism.js/prism.css，原生支持代码高亮，不在需要插件
1.7、引入cdn.jsdelivr.net
1.8、新增返回顶部按钮
1.9、新增首页缩略图分类红色角标 （UPDATE：2019/5/15） 感谢：zhujitips.com提议
1.10、新增首页文章置顶 （UPDATE：2019/5/16）
1.11、新增文章页图片资源CDN支持，配合 Centos7下文件实时同步软件lsyncd的使用 食用更佳（UPDATE：2019/9/1）
1.12、新增彩色标签云（UPDATE：2019/9/13）
1.13、新增编辑器 h3 标题和 p 标签（UPDATE：2019/9/13）
1.14、新增导航二级菜单（UPDATE：2020/10/10）
2、BUG修复：
2.1、局部UI调整 （UPDATE：2019/5/12）
2.2、新增返回顶部按钮 （UPDATE：2019/5/12）
2.3、修复菜单项在不同Wordpress版本无法正常显示的BUG （UPDATE：2019/5/12）
2.4、文章页部分UI调整 （UPDATE：2019/5/13）
2.5、修复文章页导航在移动端无法折叠的BUG （UPDATE：2019/5/13）
2.6、部分UI调整（UPDATE：2019/5/15）
2.7、调整移动端UI适配，更清爽 （UPDATE：2019/8/22）
2.8、部分UI及文章页评论框UI调整 （UPDATE：2019/9/13）
3、食用方法：
3.1、如何修改图片轮播：代码位于主题下的hearder.php，轮播图片位于主题下的images文件夹，默认轮播图片尺寸：1280*300（px），默认图片为banner1-banner3，
示例代码如下：
<div class="carousel-inner">
<div class="carousel-item active">
<a href="/182.html"> <img src="<?php echo get_template_directory_uri(); ?>/images/banner1.jpg"></a>
<div class="carousel-caption">
<a href="/182.html">
<h2 class="text-white">基于SSL实现Mysql加密的主从复制配置</h2>
</a>
</div>
</div>
<div class="carousel-item">
<a href="/635.html"> <img src="<?php echo get_template_directory_uri(); ?>/images/banner2.jpg"></a>
<div class="carousel-caption">
<a href="/635.html">
<h2 class="text-white"> 如何建立Varnish CDN集群</h2>
</a>
</div>
</div>
<div class="carousel-item">
<a href="/157.html"> <img src="<?php echo get_template_directory_uri(); ?>/images/banner3.jpg"></a>
<div class="carousel-caption">
<a href="/157.html">
<h2 class="text-white">基于运营商的分布式DNS搭建</h2>
</a>
</div>
</div>
</div>
<!-- 轮播图片结束 -->
3.2、右边栏广告位展示位于主题下的sidebar.php文件，图片位于主题下的images文件夹，默认图片为d1-d9.png
示例代码如下：
<div class="card-body">
<div class="row mt-2">
<div class="col-xs-12 col-md-12">
<div class="mt-2"><img src="<?php echo get_template_directory_uri(); ?>/images/d2.png" width="100%" height="150"></div>
</div>
</div>
</div>
3.3、文章缩略图，代码位于主题下的functions.php文件，图片位于主题下的images文件夹，默认图片d1-d9.png
缩略图规则：如果文章中含有图片，则选取文章第一幅图片，如果文章中没有图片，则随即调用d1-d9.png
示例代码如下：
//文章缩略图
function post_thumbnail_src()
{
global $post;
if ($values = get_post_custom_values("thumb")) { //输出自定义域图片地址
$values = get_post_custom_values("thumb");
$post_thumbnail_src = $values[0];
} elseif (has_post_thumbnail()) { //如果有特色缩略图，则输出缩略图地址
$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
$post_thumbnail_src = $thumbnail_src[0];
} else {
$post_thumbnail_src = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$post_thumbnail_src = $matches[1][0]; //获取该图片 src
if (empty($post_thumbnail_src)) { //如果日志中没有图片，则显示随机图片
$random = mt_rand(1, 8);
echo get_bloginfo('template_url');
echo '/images/d' . $random . '.png';
//如果日志中没有图片，则显示默认图片
//echo '/images/6666.png';
}
};
echo $post_thumbnail_src;
}
3.4、文章页版权修改，代码位于主题single.php文件
示例代码如下：
<div class="card-header col-md-12 mb-4 border-bottom border-top">
<li><strong>版权声明：</strong>本文版权归<a href="<?php echo network_site_url('/'); ?>"><?php bloginfo('name'); ?></a>和原作者所有，未经许可不得转载。文章部分来源于网络仅代表作者看法，如有不同观点，欢迎进行交流。除非注明，文章均由 <a href="https://www.kaifashuo.com"><?php bloginfo('name'); ?></a> 整理发布，欢迎转载，转载请带版权。</li><br />
<li class="reprinted"><strong>来源：</strong><?php bloginfo('name'); ?> ( <?php echo network_site_url('/'); ?> )，<?php echo get_bloginfo('description'); ?>。</li>
<li class="reprinted"><strong>链接：</strong><a href="<?php the_permalink(); ?>" rel="bookmark" title="本文固定链接 <?php the_permalink(); ?>"><?php the_permalink(); ?></a></li>
</div>
3.5、页脚信息修改，代码位于主题footer.php，图片位于主题下images文件夹，默认图片ovh.png
示例代码如下：
<div class="row">
<div class="col-xs-12 col-md-4 mt-4 mb-4">
<h5 class="text-dark">网站声明</h3>
<br />
<p class="text-secondary"><?php bloginfo('name'); ?>博客建立于2018年，主要以香港、美国等国外VPS信息发布为主，还包括少量独立服务器优惠信息。本站仅做资料收集，不对商家任何信息及交易做信用担保，有交易纠纷请自行解决。</p>
<br />
</div>
<div class="col-xs-12 col-md-4 mt-4 mb-4">
<h5 class="text-dark">技术支持</h3>
<br />
<p class="text-secondary">©<?php echo date('Y'); ?> Copyright <?php bloginfo('name'); ?> • Powered by <a href="https://wordpress.org/">WordPress</a> • Theme by Affdalao（ WPCard ）. <a href="/sitemap.xml" class="text-secondary">sitemap</a>
</p>
<br />
<p class="text-secondary">HOST By: <img class="ml-2" src="<?php echo get_template_directory_uri(); ?>/images/ovh.png" width="220px" height="80px;">
</p>
<br />
<p class="text-secondary">CDN By: <img class="ml-2" src="https://cdntiger.com/images/cdntiger-logo-blue.png" width="220px" height="80px;">
</p>
</div>
<div class="col-xs-12 col-md-4 pt-4">
<h5 class="text-dark">投稿/主题/域名购买</h5>
<br />
<p class="text-secondary">TG：<a href="https://t.me/kaifashuo" target="_blank">kaifashuo</a></p>
<br />
</div>
</div>
3.6、prism语法支持语言，HTML/BASH/PHP/CSS等，官网：https://prismjs.com
<pre><code class="language-bash"> </code></pre>
<pre><code class="language-html"> </code></pre>
<pre><code class="language-css"> </code></pre>
<pre><code class="language-php"> </code></pre>
3.7、新增文章页图片资源CDN支持，代码位于主题functions.php文件
示例代码如下：
//定义图片和静态资源CDN img.kaifashuo.com修改为你自己的CDN域名即可 CDN与图片懒加载，只能选用其一，默认选项为图片懒加载。
//定义图片和静态资源CDN
// define('CDN_HOST', '//img.kaifashuo.com');
// add_filter('the_content', 'z_cdn_content');
// function z_cdn_content($content)
// {
// return str_replace(home_url() . '/wp-content/uploads', CDN_HOST . '/wp-content/uploads', $content);
// }
// add_filter('wp_get_attachment_src', 'z_get_attachment_url', 10, 2);
// function z_get_attachment_url($url, $post_id)
// {
// return str_replace(home_url(), CDN_HOST, $url);
// }
//图片懒加载
add_filter('the_content', 'lazyload');
function lazyload($content)
{
$loadimg_url = get_bloginfo('template_directory') . '/images/loading.gif';
if (!is_feed() || !is_robots) {
$content = preg_replace('//i', "\n", $content);
}
return $content;
}
3、二十四小时主题免费领取活动：
主题固定链接（仅限活动当天开放下载）：https://www.kaifashuo.com/soft/wpcard.zip
3.1、2019/8/15 – 2019/8/16 已结束
3.2、2019/8/30 – 2019/8/31 已结束
3.3、2019/9/7 – 2019/9/8 已结束
还没有任何评论，你来说两句吧