|
|
|
|
交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！
您需要 登录 才可以下载或查看，没有账号？立即注册
×
今天给大家分享是一个子比主题文章主内容上方加一个详细信息样式，这款样式我觉得还是不错的，用子比做软件站的人挺多的，所以今天就给大家免费分享一下这个文章主内容详细信息样式，古腾堡可以自定义信息，喜欢的自行部署吧！
效果
后台配置
更新日志
- # 修复下载按钮自动跳转子比的付费阅读、付费下载等等功能
- # 修复没有开启付费阅读、付费下载等不显示文章顶部显示下载
代码部署
这个原来版本的代码我将保留，在下面我将发新的一个版本~
原版代码
一共有两个部分，跟着我的教程走不会有问题，话不多说直接开始！
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样式即可！
修复版本代码
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日');
- // 判断是否有资源下载
- $pay_mate = get_post_meta($post->ID, 'posts_zibpay', true);
- $has_download = false;
- if (!empty($pay_mate['pay_download']) && is_array($pay_mate['pay_download'])) {
- foreach ($pay_mate['pay_download'] as $item) {
- if (!empty($item['link'])) {
- $has_download = true;
- break;
- }
- }
- }
- $extra_html = '';
- if ($has_download) {
- // PC端
- $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样式即可，修复版本css代码不动
JS代码 修复版本要多加一个JS代码，直接丢到：子比主题–>>自定义javascript代码
- function scrollToTarget() {
- var target = document.querySelector('.box-body.relative');
- if (target) {
- var rect = target.getBoundingClientRect();
- var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
- var offset = 100;
- window.scrollTo({
- top: rect.top + scrollTop - offset,
- behavior: 'smooth'
- });
- }
- }
|
|
窥视卡
雷达卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
顶顶卡
狗头保命
侦查卡
