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

自用主题

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

以前一直在用Typecho,因为更新不及时的缘故换成了Wordpress,据官方说,世界上30%左右的网站用的是Wordpress,包括常用数据库Mariadb官网用的也是Wordpress,以前也玩过wordpress,但是总是玩不转,现在从Typecho更换到Wordpress也熟悉了一下,基本可以玩的转了,看了下主题,好看的主题基本都需要付费,当时也有破解版的,但总归没有我理想中的主题,然后自己看了下wordpress的主题开发,开发了本博客正在用的主题,命名为:WPcard,为什么用WPcard命名呢?因为主题大部分采用Bootstrap4中的card模块开发,并用的是wordpress程序,遂命名为WPcard。

1、主题特色:

1、基于Bootstrap4开发,自适应移动版
2、自带图片懒加载,可以卸载Lazyload插件了
3、自带图片轮播功能
4、自带右边栏广告位展示
5、可直接使用不依赖任何插件,可根据自己的需要安装插件
6、引入prism.js/prism.css,原生支持代码高亮,不在需要插件
7、引入cdn.jsdelivr.net(被Q) bootcdn替代本站cdntiger.com提供的CDN
8、新增返回顶部按钮
9、新增首页分类 (UPDATE:2019/5/15) 感谢:zhujitips.com提议
10、新增首页文章置顶 (UPDATE:2019/5/16)

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)

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://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>


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


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

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

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

    发表评论

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