引子
Argon的原版主题中说说页面是提供了一个模板,在页面中添加这个模板来使用,但是这个模板的默认加载机制是拉取所有说说,当说说数量变大的时候可能会造成卡顿,并且页面过长,因此想为说说添加带页码的归档页面。
Argon怎么实现说说的
首先在function.php
中,使用register_post_type()
注册了说说类型的博文(post):
/*说说*/
add_action('init', 'init_shuoshuo');
function init_shuoshuo(){
$labels = array(
'name' => __('说说', 'argon'),
'singular_name' => __('说说', 'argon'),
'add_new' => __('发表说说', 'argon'),
'add_new_item' => __('发表说说', 'argon'),
'edit_item' => __('编辑说说', 'argon'),
'new_item' => __('新说说', 'argon'),
'view_item' => __('查看说说', 'argon'),
'search_items' => __('搜索说说', 'argon'),
'not_found' => __('暂无说说', 'argon'),
'not_found_in_trash' => __('没有已遗弃的说说', 'argon'),
'parent_item_colon' => '',
'menu_name' => __('说说', 'argon')
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'exclude_from_search' => true,
'query_var' => true,
'rewrite' => array(
'slug' => 'shuoshuo',
'with_front' => false
),
'capability_type' => 'post',
'has_archive' => false,
'hierarchical' => false,
'menu_position' => null,
'menu_icon' => 'dashicons-format-quote',
'supports' => array('editor', 'author', 'title', 'custom-fields', 'comments')
);
register_post_type('shuoshuo', $args);
}
其中$arg
中的has_archive
参数指定了它市场否存在存档(archive)页面,rewrite参数指定了它的路径规则,slug
指定路径别名,with_front
指定是否包含WP_Rewrite::$front
(与固定链接有关,例如/archives/
)。根据Argon的默认配置,/shuoshuo/
不存在(因为不存在存档页面),/shuoshuo/文章名
可以访问指定的文章。更多请参考WordPress Post Type 教程。
单个说说是通过调用argon/single-shuoshuo.php
来渲染的,在页面中创建的说说页面是以argon/shuoshuo.php
为模板的,它默认查询所有的说说:
query_posts("post_type=shuoshuo&post_status=publish&posts_per_page=-1");
并且只查询status为publish(可见性为公开)的博文,因此还存在当用户登录后也无法查看私密(private)文章的问题。
改造说说归档页面
启用归档页面,在function.php
中修改has_archive
为true
:
/*说说*/
add_action('init', 'init_shuoshuo');
function init_shuoshuo(){
$labels = array(
'name' => __('说说', 'argon'),
'singular_name' => __('说说', 'argon'),
'add_new' => __('发表说说', 'argon'),
'add_new_item' => __('发表说说', 'argon'),
'edit_item' => __('编辑说说', 'argon'),
'new_item' => __('新说说', 'argon'),
'view_item' => __('查看说说', 'argon'),
'search_items' => __('搜索说说', 'argon'),
'not_found' => __('暂无说说', 'argon'),
'not_found_in_trash' => __('没有已遗弃的说说', 'argon'),
'parent_item_colon' => '',
'menu_name' => __('说说', 'argon')
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'exclude_from_search' => true,
'query_var' => true,
'rewrite' => array(
'slug' => 'shuoshuo',
'with_front' => false
),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'menu_icon' => 'dashicons-format-quote',
'supports' => array('editor', 'author', 'title', 'custom-fields', 'comments')
);
register_post_type('shuoshuo', $args);
}
此时wordpress会在archive-shuoshuo.php
不存在的情况下调用archive.php
,因此我们还需要实现archive-shuoshuo.php
,可以直接将shuoshuo.php
复制并重命名为archive-shuoshuo.php
,为了使路径重新生效,需要在wordpress后台『设置』中的『固定链接』点击保存更改以生效,此时访问/shuoshuo/
即我们设置的归档页面(与原来的模板页面相同)。
为说说归档页面添加页码
修改archive-shuoshuo.php
的查询逻辑:
<?php
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$args = array(
'post_type' => 'shuoshuo',
'posts_per_page' => 10,
'paged' => $paged
);
$wp_query = new WP_Query( $args );
?>
<?php get_header(); ?>
指定每页的博文数量为10,并且根据页码查询相应的博文,使用WP_Query
也规避了权限的问题,在登录后能正常查看私密文章。
但是说说数量显示错误,还是只显示公开说说的数量,因此还需要修改这部分的逻辑:
<?php echo wp_count_posts('shuoshuo','') -> publish; ?> <?php _e('条说说', 'argon');?>
改为:
<?php global $wp_query; echo $wp_query -> found_posts; ?> <?php _e('条说说', 'argon');?>
折叠说说时图片懒加载不正常
虽然能正常显示说说了,但多个折叠说说并包含大量图片使会导致不展开前一个说说下一个说说的图片就不加载(实际是加载了的,似乎由于fancybox的问题不能正常加载),没有加载fancybox的主页的说说就不会这个问题,因此需要将这个页面的fancybox禁用,添加fancybox的逻辑存在于function.php
中:
//Lazyload 对 <img> 标签预处理以加载 Lazyload
function argon_lazyload($content){
$lazyload_loading_style = get_option('argon_lazyload_loading_style');
if ($lazyload_loading_style == ''){
$lazyload_loading_style = 'none';
}
$lazyload_loading_style = "lazyload-style-" . $lazyload_loading_style;
if(!is_feed() && !is_robots() && !is_home()){
$content = preg_replace('/<img(.*?)src=[\'"](.*?)[\'"](.*?)((\/>)|(<\/img>))/i',"<img class=\"lazyload " . $lazyload_loading_style . "\" src=\"data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\" \$1data-original=\"\$2\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC\"\$3$4" , $content);
$content = preg_replace('/<img(.*?)data-full-url=[\'"]([^\'"]+)[\'"](.*)>/i',"<img$1data-full-url=\"$2\" data-original=\"$2\"$3>" , $content);
$content = preg_replace('/<img(.*?)srcset=[\'"](.*?)[\'"](.*?)>/i',"<img$1$3>" , $content);
}
return $content;
}
function argon_fancybox($content){
if(!is_feed() && !is_robots() && !is_home()){
if (get_option('argon_enable_lazyload') != 'false'){
$content = preg_replace('/<img(.*?)data-original=[\'"](.*?)[\'"](.*?)((\/>)|>|(<\/img>))/i',"<div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='$2'>$0</div>" , $content);
}else{
$content = preg_replace('/<img(.*?)src=[\'"](.*?)[\'"](.*?)((\/>)|>|(<\/img>))/i',"<div class='fancybox-wrapper' data-fancybox='post-images' href='$2'>$0</div>" , $content);
}
}
return $content;
}
function the_content_filter($content){
if (get_option('argon_enable_lazyload') != 'false'){
$content = argon_lazyload($content);
}
if (get_option('argon_enable_fancybox') != 'false' && get_option('argon_enable_zoomify') == 'false'){
$content = argon_fancybox($content);
}
global $post;
$custom_css = get_post_meta($post -> ID, 'argon_custom_css', true);
if (!empty($custom_css)){
$content .= "<style>" . $custom_css . "</style>";
}
return $content;
}
主要是判断了是否为主页等页面,不是的就使用fancybox包装,因此使用is_archive()
增加判断是否为归档页面,修改这两个函数的判断条件:
if(!is_feed() && !is_robots() && !is_home() && !is_archive()){
当然这样修改了之后就无法在说说归档页面使用fancybox,但图片仍然是懒加载的。
其他的问题
在使用懒加载时,fancybox的大图显示正常,但是预览缩略图无法正常显示,似乎与懒加载有关。