今天给大家分享是一个子比主题文章主内容上方加一个详细信息样式，这款样式我觉得还是不错的，用子比做软件站的人挺多的，所以今天就给大家免费分享一下这个文章主内容详细信息样式，古腾堡可以自定义信息，喜欢的自行部署吧！
样式效果
后台设置
代码部署
一共有三个部分，跟着我的教程走不会有问题，话不多说直接开始！
在网站后台找到【zibll主题设置】-【文章&列表】-【文章页面】-【在文章内容后-插入内容】
填入 <div id=’down_1′></div> 这是识别滚动到下方下载区域的代码。
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_SoftInfo_switch',
'title' => '是否开启',
'type' => 'radio',
'inline' => true,
'options' => array(
'no' => '关闭',
'yes' => '开启',
),
'default' => 'no'
);
$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，那么这个文件就是子比的页面的文件，然后我们找到下面的 zib_get_breadcrumbs 函数，大约在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;
}
$post = get_post();
$SoftInfo_switch = get_post_meta($post->ID, 'zib_SoftInfo_switch', true);
if ($SoftInfo_switch){
$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 = '默认封面图片链接';
$img_url = zib_get_spare_thumb();
}
$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>
<a type="button" href="javascript:(scrollTo(\'#down_1\',-100));" style="width: 180px; height: 50px; text-align: center; color: #fff; background: #008ded; display: block; font-size: 20px; margin: 0px auto 0 auto; border: none; margin-left:600px; padding-top:10px;">下载地址</a>
</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;">
<a type="button" href="javascript:(scrollTo(\'#down_1\',-100));"style="width: 100%; height: 40px;color: #fff; background: #008ded; display: block; font-size: 18px; border: none;text-align:center;padding-top:5px">下载地址</a>
</div>
</header>
</div>
</div>';
$zib_get_breadcrumbs = $lin . $extra_html;
return $zib_get_breadcrumbs;
}
}
$zib_get_breadcrumbs = '';
return $zib_get_breadcrumbs;
}CSS代码我就不多说了，直接丢到：子比主题–>>自定义CSS样式即可！
您需要回复本文后才能查看完整内容
已经回复？立即刷新
评论列表（1条）
看看