子比主题文章主内容详细信息样式-「子比主题美化」

效果

后台配置

代码部署

本文隐藏内容

一共有三个部分，跟着我的教程走不会有问题，话不多说直接开始！

func代码

定位：/wp-content/themes/zibll/func.php文件，没有这个文件自己创建一个，记得加上php头，要不然会报错，然后将下面的代码放到里面，其实下面的代码是放到metabox-options.php文件里面的，但是方便就放到func.php里面吧！

if (class_exists('CSF')) {
    CSF::createMetabox('zib_post_extra', array(
        'title'      => '文章额外信息',
        'post_type'  => array('post'),
        'context'    => 'advanced',
        'data_type'  => 'unserialize',
    ));

    $fields = array();

    $fields[] = array(
        'id'      => 'zib_platform',
        'type'    => 'select',
        'title'   => '平台',
        'options' => array(
            'android' => 'Android',
            'ios'     => 'iOS',
            'windows' => 'Windows',
            'mac'     => 'Mac',
            'linux'   => 'Linux',
            'other'   => '其他',
        ),
        'default' => 'android'
    );

    $fields[] = array(
        'id'    => 'zib_size',
        'type'  => 'text',
        'title' => '文件大小',
        'desc'  => '如：21.3M'
    );

    $fields[] = array(
        'id'    => 'zib_version',
        'type'  => 'text',
        'title' => '文件版本',
        'desc'  => '如：v3.3.7'
    );

    $fields[] = array(
        'id'    => 'zib_language',
        'type'  => 'text',
        'title' => '语言',
        'desc'  => '如：简体中文'
    );

    $fields[] = array(
        'id'      => 'zib_license_type',
        'type'    => 'select',
        'title'   => '授权类型',
        'options' => array(
            'free'      => '免费版',
            'modified'  => '修改版',
            'official'  => '官方版',
            'other'     => '其他',
        ),
        'default' => 'official'
    );

    $fields[] = array(
        'id'      => 'zib_recommend_star',
        'type'    => 'select',
        'title'   => '推荐星级',
        'options' => array(
            '1' => '★☆☆☆☆',
            '2' => '★★☆☆☆',
            '3' => '★★★☆☆',
            '4' => '★★★★☆',
            '5' => '★★★★★',
        ),
        'default' => '5'
    );

    CSF::createSection('zib_post_extra', array('fields' => $fields));
}
add_action('admin_head', function() {
    echo '<style>
    .csf-metabox .csf-field { margin-bottom: 6px !important; }
    .csf-metabox .csf-field .csf-title { margin-bottom: 2px !important; }
    .csf-metabox .csf-field + .csf-field { border-top: none !important; }
    </style>';
});

single代码

定位：/wp-content/themes/ZibTF/inc/functions/zib-single.php，那么这个文件就是子比的页面的文件，然后我们找到下面的函数，大约在157行，如下图

把这整个函数全部替换成下面的代码，因为我改了里面的代码，你直接替换就行，记得备份一下，方便后面好更新，如果有子主题的话当我没说！

function zib_get_breadcrumbs() {
    static $zib_get_breadcrumbs = null;
    if ($zib_get_breadcrumbs !== null) {
        return $zib_get_breadcrumbs;
    }

    if (!is_single() || !_pz('breadcrumbs_single_s', true)) {
        $zib_get_breadcrumbs = '';
        return $zib_get_breadcrumbs;
    }

    $categorys = get_the_category();
    if ($categorys) {
        $category = $categorys[0];
        $lin = '<ul class="breadcrumb">
            <li><a href="' . get_bloginfo('url') . '"><i class="fa fa-map-marker"></i> ' . (!_pz('breadcrumbs_home_text', true) ? get_bloginfo('name') : '首页') . '</a></li><li>
            ' . get_category_parents($category->term_id, true, ' </li><li> ') . (!_pz('breadcrumbs_single_text', true) ? get_the_title() : '正文') . '</li></ul>';

        $post = get_post();
        $size = 'full';
        $img_url = wp_cache_get($post->ID, 'post_thumbnail_url_' . $size, true);

        if (false === $img_url) {
            $img_url = '';

            $post_thumbnail_id = get_post_thumbnail_id($post->ID);
            if ($post_thumbnail_id) {
                $image_src = zib_get_attachment_image_src($post_thumbnail_id, $size);
                $img_url   = isset($image_src[0]) ? $image_src[0] : '';
            }

            if (!$img_url) {
                $img_url = zib_get_post_meta($post->ID, 'thumbnail_url', true);
            }

            if (!$img_url && _pz('thumb_postfirstimg_s', true)) {
                $post_img_urls = zib_get_post_img_urls($post);
                $img_url       = isset($post_img_urls[0]) ? $post_img_urls[0] : '';
                if ($img_url && $size && 'full' !== $size) {
                    $img_id = zib_get_image_id($img_url);
                    if ($img_id) {
                        $img = wp_get_attachment_image_src($img_id, $size);
                        if (isset($img[0])) {
                            $img_url = $img[0];
                        }
                    }
                }
            }

            wp_cache_set($post->ID, $img_url, 'post_thumbnail_url_' . $size, 3600);
        }

        if (!$img_url) {
            $img_url = '默认封面图片链接';
        }

        $cat = get_the_category();
        $cat_links = '';
        $category_colors = ['blue', 'green', 'yellow', 'red', 'purple'];
        foreach ($cat as $index => $category) {
            $color = $category_colors[$index % count($category_colors)];
            $cat_links .= '<a class="but ml6 radius c-' . $color . '" href="' . get_category_link($category->term_id) . '" title="查看此分类更多文章"><i class="fa fa-folder-open-o"></i>' . $category->name . '</a> ';
        }

        $tags = get_the_tags();
        $tag_links = '';
        if ($tags) {
            foreach ($tags as $tag) {
                $tag_links .= '<a class="but ml6 radius" title="查看此标签更多文章" href="' . get_tag_link($tag->term_id) . '">#' . $tag->name . '</a>';
            }
        }

        $platform = get_post_meta($post->ID, 'zib_platform', true);
        $platform_map = [
            'android' => 'Android',
            'ios' => 'iOS',
            'windows' => 'Windows',
            'mac' => 'Mac',
            'linux' => 'Linux',
            'other' => '其他'
        ];
        $platform_text = isset($platform_map[$platform]) ? $platform_map[$platform] : 'Android';

        $size_text = get_post_meta($post->ID, 'zib_size', true);
        $size_text = $size_text ? $size_text : '未知';

        $version_text = get_post_meta($post->ID, 'zib_version', true);
        $version_text = $version_text ? $version_text : '未知';

        $license_type = get_post_meta($post->ID, 'zib_license_type', true);
        $license_type_text = '官方版'; // 默认
        switch ($license_type) {
            case 'free': $license_type_text = '免费版'; break;
            case 'modified': $license_type_text = '修改版'; break;
            case 'official': $license_type_text = '官方版'; break;
            case 'other': $license_type_text = '其他'; break;
        }

        $recommend_star = get_post_meta($post->ID, 'zib_recommend_star', true);
        $recommend_star = $recommend_star ? str_repeat('★', $recommend_star) . str_repeat('☆', 5 - $recommend_star) : '★★★★★';

        $update_date = get_the_date('Y年n月j日');

        $extra_html = '
        <div class="pc-content">
            <div class="hide-on-mobile w820 ovf pad20 bgW tjApp" style="margin-bottom: 20px; border-radius: 8px; box-shadow: 0 0 10px var(--main-shadow);background-color: var(--main-bg-color);">
                <div class="app-info ovf">
                    <b class="fl appImg"><img src="' . esc_url($img_url) . '" alt="' . get_the_title() . '" class="fit-cover"></b>
                    <div class="fl">
                        <h1 class="appName">' . get_the_title() . '</h1>
                        <div class="theme-box article-tags">
                            ' . $cat_links . '
                            ' . $tag_links . '
                        </div>
                    </div>
                </div>
                <div class="detaBox">
                    <div class="detaMain fl">
                        <p><span>平台：</span>' . $platform_text . '</p>
                        <p><span>大小：</span>' . $size_text . '</p>
                        <p><span>版本：</span>' . $version_text . '</p>
                        <p><span>授权：</span>' . $license_type_text . '</p>
                        <p><span>推荐：</span>' . $recommend_star . '</p>
                        <p><span>更新：</span>' . $update_date . '</p>
                    </div>
                    <div>
                        <button onclick="scrollToTarget()" style="width: 180px; height: 50px; text-align: center; color: #fff; background: #008ded; display: block; font-size: 20px; margin: 0px auto 0 auto; border: none;">立即下载</button>
                    </div>
                </div>
            </div>
        </div>';

        $first_cat_name = $cat ? $cat[0]->name : '未分类';
        $extra_html .= '
        <div class="mobile-content">
            <div class="hide-on-pc w100 ovf pad20 bgW tjApp" style="padding-left: 10px;padding-right: 10px;margin-bottom: 20px;border-radius: 8px;box-shadow: 0 0 10px var(--main-shadow);background-color: var(--main-bg-color);">
                <header id="info" style="min-height: 126px;">
                    <img src="' . esc_url($img_url) . '" alt="' . get_the_title() . '" class="fit-cover" style="float:left;margin-right:10px;width:66px;height:66px;border-radius:8px;">
                    <div class="name"><h1 style="font-size: 16px;">' . get_the_title() . '</h1></div>
                    <div class="mobile-info-grid">
                        <div><span>分类：</span>' . $first_cat_name . '</div>
                        <div><span>大小：</span>' . $size_text . '</div>
                        <div><span>更新：</span>' . $update_date . '</div>
                        <div><span>平台：</span>' . $platform_text . '</div>
                    </div>
                    <div style="margin-top: 20px;">
                        <button onclick="scrollToTarget()" style="width: 100%; height: 40px;color: #fff; background: #008ded; display: block; font-size: 18px; border: none;">立即下载</button>
                    </div>
                </header>
            </div>
        </div>';

        $zib_get_breadcrumbs = $lin . $extra_html;
        return $zib_get_breadcrumbs;
    }

    $zib_get_breadcrumbs = '';
    return $zib_get_breadcrumbs;
}

CSS代码

CSS代码我就不多说了，直接丢到：子比主题–>>自定义CSS样式即可！

/*文章顶部*/
        .mobile-content {
            display: none;
        }
        .pc-content {
            display: block;
        }
        @media (max-width: 768px) { /* 假设768px以下是移动端 */
            .mobile-content {
                display: block;
            }
            .pc-content {
                display: none;
            }
        }
.w820 {width: 100%;}
.pad20 {padding: 20px;}
.bgW {background-color: #fff;}

.ovf {overflow: hidden;}

body, input, textarea {font: 14px 'FAEF6FC5ED1';}
.ovf {overflow: hidden;}

.tjApp .app-info .appImg {margin-right: 20px;}
.tjApp .app-info img {width: 85px;height: 85px;display: block;border-radius: 10px;}
.fl {float: left;}
.tjApp .app-info div.fl {width: 490px;}
.tjApp .app-info .appName {color: var(--header-color);font-size: 20px;margin: 10px 0 15px 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;max-width: 490px;}
.tjApp .app-info .label {color: #333;font-size: 14px;}
.tjApp .detaBox {margin-top: 10px;}
.tjApp .detaBox .detaMain {width: 470px;}
.fr {
    float: right;
}
.tjApp .detaBox .downloadBtn a {
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    background: #008ded;
    display: block;
    font-size: 20px;
    margin: 0px auto 0 auto;
    border-radius: 3px;
}
a:link, a:visited {
    text-decoration: none;
}
.tjApp .app-info .article-share {
    margin-top: 10px;
}
.article-share {
    color: #333;
    line-height: 25px;
}
.article-share span {
    margin-top: 1px;
}
.tjApp .app-info .article-share div.fl {
    width: auto;
}
.tjApp .detaBox .detaMain p {
    float: left;
    width: 32%;
    height: 30px;
    line-height: 30px;
    color: var(--header-color);
    overflow: hidden;
    white-space: nowrap;
}
p {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
}.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }

.mobile-info-grid {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.mobile-info-grid > div {
    width: 50%;
    box-sizing: border-box;
    padding: 2px 0;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}
@media (min-width: 768px) {
    .mobile-info-grid { display: none; }
}