传递价值资讯
SocialMedia运营解决方案

关于wordpress的一些技巧修改记录

从今天开始,这篇文章会记录基于大前端DUX主题的一些修改技巧,并附上修改方法和源码,让我们一起,打造最完善最完美最清新的博客主题。如果你有好的修改技巧,欢迎评论探讨……

一、WordPress评论头像旋转特效教程(2015年8月29日)

这篇教程是教大家如何添加WordPress评论头像旋转特效,但是不一定每款主题都适用,下面提供CSS代码仅供参考。将以下CSS代码放到你使用主题的CSS文件中,一般添加到style.css(也许你主题公共CSS文件不是这个,具体哪个文件请自行查看)

/*头像旋转*/
.avatar{
 -webkit-transition:0.4s;
 -webkit-transition:-webkit-transform 0.4s ease-out;
 transition:transform 0.4s ease-out;
 -moz-transition:-moz-transform 0.4s ease-out;
 }
.avatar:hover{
 transform:rotateZ(360deg);
 -webkit-transform:rotateZ(360deg);
 -moz-transform:rotateZ(360deg);
}

二、DUX主题首页顶部仿themebetter首页顶部

有时候自己的东西看的久了,慢慢就产生腻烦,还有就是国外的月亮圆的心理,总觉得别人的就是最好的,这两天看大前端themebetter主题的首页大图不错,就想着学习,把自己的也弄成那样,研究一番后,现把代码公布出来,供所需之人……实际效果如下图中红色框框部分

themebetter-1

首先将以下代码添加你合适的位置,我是添加主题根目录下header.php最下端

<div class="focusbanner" style="background-image:url(https://themebetter.com/static/bg/bg_04.jpg)">
 <div class="container"> <a href="javascript:;" class="signin-loader"><p class="btn btn-primary">登录 NPIE</p></a> <a href="javascript:;" class="signup-loader"><p class="btn btn-whrite">我要注册</p></a> </div>
</div>


<div class="container">
 <ul class="eboxx">
 <li class="eboxx-i eboxx-01">
 <h4>DUX主题</h4>
 <p>扁平化、简洁白色、多设备支持、多功能配置</p>
 <a class="btn btn-sm btn-primary" target="_blank" href="http://themebetter.com/theme/dux">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" href="http://themebetter.com/preview/dux">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-02">
 <h4>XIU主题</h4>
 <p>扁平化、简洁风格,适用于图片展示站点和个人博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" href="http://themebetter.com/theme/xiu">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" href="http://themebetter.com/preview/xiu">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-03">
 <h4>D8主题</h4>
 <p>大气设计,适用于企业站、行业垂直站、团队站及个人博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" href="http://themebetter.com/theme/d8">专题</a>
 <a class="btn btn-sm btn-default" target="_blank" href="http://themebetter.com/preview/d8">查看演示</a>
 </li>
 <li class="eboxx-i eboxx-04">
 <h4>D-Simple主题</h4>
 <p>简洁2栏,适用于个人站点及团队博客</p>
 <a class="btn btn-sm btn-primary" target="_blank" href="http://themebetter.com/theme/d-simple">专题</a>
 </li>
 <li class="eboxx-i eboxx-100">
 <h4>WordPress主题定制</h4>
 <p>完全按照您的需求量身打造,此项服务需要排期,具体请联系我们</p>
 <a class="btn btn-sm btn-danger" target="_blank" href="http://themebetter.com/member/workorder-new">联系我们</a>
 </li>
 </ul>
</div>

添加CSS,注:DUX主题如果单纯添加ebox样式的话会和大前端dux主题小工具主题推荐和前段开发的样式冲突,所以我重新定义了一个样式eboxx;

/* focusbanner NPIE.NET================================================================================ */
.focusbanner {
text-align: center;
margin-bottom: 20px;
height: 200px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.focusbanner .container {
padding-top: 88px;
padding-right: 60px;
text-align: right;
}
.focusbanner .btn {
margin-left: 10px;
}
/* btn NPIE.NET======================================================================================== */
.btn {
display: inline-block;
padding: 6px 15px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 2px;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover, .btn:focus, .btn.focus {
color: #333;
text-decoration: none;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: none;
}
.btn-default {
color: #555;
background-color: #fff;
border-color: #d6d6d6;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
color: #333;
background-color: #e6e6e6;
border-color: #bbb;
}
.btn-primary {
color: #fff;
background-color: #00AAEE;
border-color: #00AAEE;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
color: #fff;
background-color: #00A1EC;
border-color: #00A1EC;
}
.btn-success {
color: #fff;
background-color: #50CD7C;
border-color: #50CD7C;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
color: #fff;
background-color: #3CC76D;
border-color: #3CC76D;
}
.btn-danger {
color: #fff;
background-color: #FF8966;
border-color: #FF8966;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
color: #fff;
background-color: #FF6F44;
border-color: #FF6F44;
}
.btn-whrite {
color: #555;
background-color: #fff;
border-color: #fff;
}
.btn-whrite:hover, .btn-whrite:focus, .btn-whrite:active {
color: #333;
background-color: #fff;
border-color: #fff;
}
.btn-xs {
padding: 2px 6px;
font-size: 12px;
}
.btn-sm {
padding: 4px 12px;
}
.btn-lg {
font-size: 20px;
border-radius: 4px;
padding: 10px 25px;
}
.btn-block {
width: 100%;
}
/* ebox NPIE.NET======================================================================================= */
.eboxx {
overflow: hidden;
font-size: 12px;
text-align: center;
background-color: #fff;
margin-bottom: 20px;
}
.eboxx h4 {
font-size: 14px;
color: #444;
margin: 10px 0;
}
.eboxx-i {
position: relative;
float: left;
width: 20%;
padding: 20px;
background-color: #fff;
color: #777;
}
.eboxx-01, .eboxx-02, .eboxx-03, .eboxx-04 {
border-right: 2px solid #eee;
}
.eboxx-i:hover {background-color: #F9F9F9;}
.eboxx-i p {height: 36px;overflow: hidden;color: #bbb;}
@media (max-width: 1024px) {
.eboxx .btn-default {display: none;}
.eboxx h4 {height: 20px;overflow: hidden;}
}
@media (max-width: 860px) {
.eboxx .eboxx-100 {display: none;}
.eboxx-i {width: 25%;}
.eboxx-04 {border-right: none;}
}
@media (max-width: 640px) {
.eboxx-i {width: 50%;}
.eboxx-01 {border-bottom: 2px solid #eee;}
.eboxx-02 {border-right: none;border-bottom: 2px solid #eee;}
}
@media (max-width: 480px) {
.eboxx-i {padding: 10px 15px 15px;}
.eboxx h4 {margin-bottom: 0;}
.eboxx-i p {margin: 5px 0}
}

三、更改大前端DUX主题【全站底部推广区】样式,样式仿小叶子

小叶子的网站:http://www.yeziting.com/

效果如下图:

yeziting-1

带后台功能的修改方法:(最重要的是先把两个图片放到你的img文件夹里,图片自行设计,暂不提供,图片名称可看CSS)

1、先添加样式,在你的主题样式表中main.css找到合适的位置放入以下代码即可。

/* main-info NPIE.NET======================================================================================================== */

.main-info {
width: 100%;
height: 300px;
padding-top: 68px;
background: url(../img/backgroundwall.jpg) repeat-x;
}

.main-info dl {
width: 950px;
margin: 0 auto;
height: 140px;
background: url(../img/blue_bg.png) repeat;
}

.main-info dl dt {
width: 100%;
padding: 30px 0 6px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 36px;
color: #fff;
text-align: center;
font-family: "微软雅黑";
}

.main-info dl dd {
width: 100%;
text-align: center;
color: #fff;
font-size: 20px;
font-family: Verdana, Geneva, sans-serif;
font-family: "微软雅黑";
}

.main-info dl dd a {
display: inline-block;
height: 32px;
line-height: 32px;
margin-left: 10px;
padding: 0 12px;
font-size: 16px;
color: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #E87E16;
}

.main-info dl dd a:hover {
background: #FF7E00;
}

@media screen and (max-width: 650px){
.main-info {
display: none;
}
}

1、找到主题根目录下option.asp打开编辑。

找到全站推广区代码,在推广标题下载添加一个推广标题,定义ID为footer_brand_title-1,代码如下

$options[] = array(
'name' => __('推广标题', 'haoui'),
'id' => 'footer_brand_title-1',
'desc' => '建议20字内',
'std' => '嗯哌-专业传递价值资讯',
'type' => 'text');

找到主题根目录下文件夹modules,编辑mo_footer_brand.php文件,将以下代码全部替换上去。

<div class="main-info">
<div class="container">
<dl><dt><?php echo _hui('footer_brand_title') ?></dt>
<dd><?php echo _hui('footer_brand_title-1') ?><?php
for ($i=1; $i <= 2; $i++) {
if( _hui('footer_brand_btn_text_'.$i) && _hui('footer_brand_btn_href_'.$i) ){
echo '<a'.(_hui('footer_brand_btn_blank_'.$i)?' target="blank"':'').' class="btn btn-lg" href="'._hui('footer_brand_btn_href_'.$i).'">'._hui('footer_brand_btn_text_'.$i).'</a>';
}
}
?>
</dd>
</dl>
</div></div>

 

赞(2) 打赏
文章由小哌编辑,资料来源于网络,如需转载请载明出处:嗯哌网 » 关于wordpress的一些技巧修改记录
分享到: 更多 (0)

评论 23

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    懂技术的都很吊

    爱百度网3年前 (2015-08-30)回复
  2. #2

    感谢博主分享,学习了

    朱海涛自媒体3年前 (2015-09-02)回复
  3. #3

    不错,已mark!

    Andy3年前 (2015-09-06)回复
  4. #4

    option.php写成了option.asp。还有我是不赞成分享别人的东西的……

    小叶3年前 (2015-09-09)回复
  5. #5

    我的底部推广涉及到2zzt.com版权的问题建议撤下。

    小叶3年前 (2015-09-09)回复
    • 嗯哌

      好的,我撤下……

      嗯哌3年前 (2015-09-10)回复
    • 嗯哌

      文章已下,请确认、、!

      嗯哌3年前 (2015-09-10)回复
      • 你还是公开吧。反正有人把我底部文件拿去了。我也不想说啥了。过段时间我换样式

        小叶3年前 (2015-09-12)回复
  6. #6

    请问您(嗯哌专题推荐)是怎么设置的哇

    小小羊3年前 (2015-09-23)回复
  7. #7

    一针见血,博主技术牛逼

  8. #8

    您好,请教下首页最新发布下掠过文章时,显示边框效果是怎么实现的

    绵羊A3年前 (2015-10-31)回复
    • 嗯哌

      main.css 里找到.excerpt:hover{在下面添加border-color: #88D3F9;

      嗯哌3年前 (2015-11-20)回复
  9. #9

    Hello baby
    That article is so helpful for me,i like it,thanks a lot!

  10. #10

    Surprisingly post,it is useful to me and others,please just keep it on….

  11. #11

    请问 我添加:二、DUX主题首页顶部仿themebetter首页顶部 按照你的代码 复制到CSS和 head文件中,横幅图片上的注册和登录错位了请问怎么解决?还有贵站有 设置 专题那样代码的教程吗

    alilun3年前 (2016-05-17)回复
  12. #12

    不知道dux主题的那个文章首页列表鼠标划过背景色从白色变为黑色在哪里修改或去掉

    体操之乡3年前 (2016-05-26)回复
  13. #13

    Basically had to state I’m just thrilled that i came on the webpage!.

    COUNTERSTRIKE2年前 (2016-06-01)回复
  14. #14

    Very informative, look forward to coming back again

    nba 2k2年前 (2016-06-02)回复
  15. #15

    仿themebetter首页顶部那里,怎么让移动端也显示出来?目前只能电脑才显示

    Jack11个月前 (12-26)回复
    • 嗯哌

      把代码贴到-后台-主题设置-广告位-手机端的框内,即可!

      嗯哌11个月前 (12-28)回复
  16. #16

    感谢博主分享,学习了

    软素官网5个月前 (06-22)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏