AFF大佬 - 分享有价值的主机信息和服务器运维编程技术
当前位置: 主页 » 自用主题

自用主题

      2019年05月11日   阅读 434 次     0 评论   

以前一直在用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(被Q) bootcdn替代本站cdntiger.com提供的CDN
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)

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.affdalao.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">&copy;<?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/affdalao" target="_blank">affdalao</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.affdalao.com修改为你自己的CDN域名即可  CDN与图片懒加载,只能选用其一,默认选项为图片懒加载。

//定义图片和静态资源CDN

// define('CDN_HOST', '//img.affdalao.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.affdalao.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 已结束

4、主题定价:199RMB,购买联系TG:affdalao


  • 版权声明:本文版权归AFF大佬和原作者所有,未经许可不得转载。文章部分来源于网络仅代表作者看法,如有不同观点,欢迎进行交流。除非注明,文章均由 AFF大佬 整理发布,欢迎转载,转载请带版权。

  • 来源: AFF大佬( https://www.affdalao.com/ ),分享编程和计算机技术。
  • 链接:本文链接:https://www.affdalao.com/themes
  • 评论(0

    1. 还没有任何评论,你来说两句吧

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注