Wordress Git主题修改适合摄影书籍推荐的模版[首页篇] / 网站运营

1年前 阅读 / 491 来源 / 原创 文 / 荒痕

最近准备给自己的摄影资讯网站添加一个摄影书籍推荐的子网站,还是使用wordpress程序,一直没找到适合的书籍推荐的wordpress模版,最后选择Git主题先用一下,这个主题的功能还是非常强大,但是默认主题并不太适合用做书籍推荐,还需要修改一下,这篇文就纯记录修改过程!

首先我将原背景去掉并直接使用白底,这个在自定义里面可以设置!


然后对是对缩略图的调整,Git主题原缩略图是横向图,但是书籍封面一般都是竖向的!这里不光需要调整列表主列表所虐图还需要调整相关文章的缩略图!


缩略图修改文件地址:modules/card.php


列表缩略图原代码

<a href="<?php
        the_permalink(); ?>" title="<?php
        the_title(); ?>"><?php
        if(git_get_option('git_lazyload') ){$src = 'data-original';}else{$src = 'src';}
        if (git_get_option('git_qncdn_b') ) {
            if(git_get_option('git_cdnurl_style') ){
                $githumb5 = '!githumb5.jpg';
            }else{
                $githumb5 = '?imageView2/1/w/253/h/169/q/75';
            }
            echo '<img class="thumb" style="width:253px;height:169px" '.$src.'="';
            echo post_thumbnail_src();
            echo ''.$githumb5.'" alt="' . get_the_title() . '" />';
        } else {
            echo '<img class="thumb" style="width:253px;height:169px" '.$src.'="' . GIT_URL . '/timthumb.php?src=';
            echo post_thumbnail_src();
            echo '&h=169&w=253&q=90&zc=1&ct=1" alt="' . get_the_title() . '" />';
        } ?></a>

列表缩略图修改后的代码

<a href="<?php
        the_permalink(); ?>" title="<?php
        the_title(); ?>"><?php
        if(git_get_option('git_lazyload') ){$src = 'data-original';}else{$src = 'src';}
        if (git_get_option('git_qncdn_b') ) {
            if(git_get_option('git_cdnurl_style') ){
                $githumb5 = '!githumb5.jpg';
            }else{
                $githumb5 = '?imageView2/1/w/190/h/260/q/75';
            }
            echo '<img class="thumb" style="width:190px;height:260px" '.$src.'="';
            echo post_thumbnail_src();
            echo ''.$githumb5.'" alt="' . get_the_title() . '" />';
        } else {
            echo '<img class="thumb" style="width:190px;height:260px" '.$src.'="' . GIT_URL . '/timthumb.php?src=';
            echo post_thumbnail_src();
            echo '&h=260&w=190&q=90&zc=1&ct=1" alt="' . get_the_title() . '" />';
        } ?></a>


将原来w253xh169横向修改称竖向的w190xh260,并微调适合的封面比例


调换之后,只是修改了缩略图的尺寸,由于缩略图固定了高宽,而不是百分比缩放,同时我使用的是卡片式的列表,列表宽度用百分百比固定了,所这里还要修改列表宽度的百分比使其与缩略图宽度相协调!


这就要修改style.css文件了


找到这段代码

.card{width:33.3%}

修改为

.card{width:25%}


对比效果如下


Wordress Git主题修改适合摄影书籍推荐的模版

然而这里还没完,pc段看来好像是没问题了,还需要对手机进行调整!


找到原代码

.category .thumb-img img,.page-template-gallery .thumb-img img,.thumb-img img{height:117px!important}

修改为

.category .thumb-img img,.page-template-gallery .thumb-img img,.thumb-img img{height:100%!important}


这里还有一个问题,就是@media screen and自适应少了一个ipad的宽度,这里需要添加一个@media screen and (max-width:991px) and (min-width:768px)的自适应,设置卡片宽度为25%,将原来的@media screen and (max-width:800px)修改为@media screen and (max-width:767px),


继续对列表里面的内容进行修改,


#边框和列表底色:由于是白色背景,且我个人也不太喜欢这个列表的描边效果,所以这两项需要修改一下,首先去掉这个描边效果依然是修改style.css式样


原代码

.card-item {
    position: relative;
    overflow: hidden;
    margin: auto 6px;
    border: 10px solid #FFF;
    border-bottom: 0 none;
    background-color: #FFF;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.15);
}

修改为

.card-item {
    position: relative;
    overflow: hidden;
    margin: auto 6px;
    border: 10px solid #fbfbfb;
    border-bottom: 0 none;
    background-color: #fbfbfb;
}


#顺带修改一下hover鼠标停留效果,找到下面这段代码

.card-item:hover{box-shadow:0 5px 5px 0 rgba(0,0,0,.25)}

修改为

.card-item:hover{-webkit-box-shadow: 0 2px 5px 0 rgba(146, 146, 146, .1);-moz-box-shadow: 0 2px 5px 0 rgba(146, 146, 146, .1);box-shadow: 0 2px 5px 0 rgba(146, 146, 146, 0.21);}


#标题加粗并剧中显现

原代码

.card-item h3 a{overflow:hidden;height:25px;font-weight:400;font-size:.875rem;line-height:1.5625rem}

修改后

.card-item h3 a{overflow:hidden;height:25px;font-weight:800;font-size:.875rem;line-height:1.5625rem;text-align:center}


#标题颜色修改

原代码

a{color:#00a67c;text-decoration:none}a:focus,a:hover{color:#007046;text-decoration:none}

修改后

a{color:#48494d;text-decoration:none}a:focus,a:hover{color:#337ab7;text-decoration:none}


#去掉原来的分类显示,将[立刻查看]调用[分类]显示,将[日期]改为调用[作者]

这里就需要修改modules/card.php文件了


将[立刻查看]调用[分类]显示

原代码

<div class="cardpricebtn"><i class="fa fa-calendar"></i> <?php
        the_time('m-d'); ?><a class="cardbuy" href="<?php
        the_permalink(); ?>"><i class="fa fa-eye"></i> 立刻查看</a></div>

修改后

<div class="cardpricebtn"><i class="fa fa-user"></i> <?php
    echo get_the_author() ?></a><?php
    if (!is_category()) {
        $category = get_the_category();
        if ($category[0]) {
            echo '<a class="cardbuy" href="' . get_category_link($category[0]->term_id) . '">' . $category[0]->cat_name . '</a>';
        }
    }; ?></div>


大致完成首页的修改!相对来说比较简单!下篇文章讲记录内页修改!

0

评论列表
共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~