Tạo Trang Lưu trữ Danh mục ở Định dạng Thư viện

Bước 1: Thêm mã sau vào tệp functions.php của bạn:

/**
* Category Archive in Gallery Format
*
* @author Genesis Developer
* @license GPL-2.0+
* @link http://genesisdeveloper.me/
* @copyright Copyright ( c ) 2015, Genesis Developer.
*/
//* Add the following codes in your functions.php file
//* Show all posts
add_action( 'pre_get_posts', 'gd_show_all_post_category_archive' );
function gd_show_all_post_category_archive( $query ) {
if( ! is_admin() && is_category() && $query->is_main_query() ) {
$query->set( 'nopaging', true );
return;
}
}
add_action( 'genesis_before_entry', 'gd_category_archive_template' );
function gd_category_archive_template() {
if( ! is_category() )
return;
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
add_action( 'genesis_entry_header', 'genesis_do_post_image', 4 );
add_action( 'genesis_entry_header', 'gd_do_post_publish_date', 9 );
add_filter( 'genesis_attr_entry', 'gd_add_column_class' );
add_filter( 'genesis_attr_entry-image', 'gd_entry_image_attr' );
}
//* Display publish date
function gd_do_post_publish_date() {
printf( '<p class="entry-meta">%s</p>', do_shortcode( '[post_date]' ) );
}
//* Add columns class
function gd_add_column_class( $attributes ) {
$attributes['class'] .= ' col-3';
return $attributes;
}
//* Add class in img
function gd_entry_image_attr( $atts ) {
$atts['class'] = 'category-thumb';
return $atts;
}
//* Remove filters
add_action( 'genesis_after_entry', 'gd_remove_filter' );
function gd_remove_filter() {
if( ! is_category() )
return;
remove_filter( 'genesis_attr_entry', 'gd_add_column_class' );
remove_filter( 'genesis_attr_entry-image', 'gd_entry_image_attr' );
}

Bước 2: Tạo một tệp js mới “hover.js” và đặt trong thư mục “your-child-theme-folder / js”. Bây giờ hãy thêm các tập lệnh này vào tệp này:

jQuery(document).ready(function($){
  $(".col-3").hover(function(){
    $(this).find('.entry-header').fadeIn();
  },function(){
    $(this).find('.entry-header').fadeOut();
  });
});

Bước 3: Tải tệp JS mới này trên trang web của bạn bằng wp_enqueue_scripts chức năng. Thêm mã php sau vào tệp functions.php của bạn. Tệp JS này sẽ chỉ tải trên trang lưu trữ danh mục.

//* Loading JS file on Category Archive page only
add_action( 'wp_enqueue_scripts', 'gd_hover_effect' );
function gd_hover_effect() {
   if( ! is_category() )
     return;
   wp_enqueue_style( 'hover-js', get_stylesheet_directory_uri() . '/js/hover.js', array(), CHILD_THEME_VERSION );
}

Bước 4: Bước cuối cùng là tạo kiểu. Mở tệp style.css của bạn và thêm CSS sau:

.category .col-3 {
  float: left;
	margin: 0 0 0.5% 1.5%;
	overflow: hidden;
  position: relative;
	text-align: center;
	width: 32.333333333%;
}
.category .col-3:nth-of-type(3n+1) {
  clear: both;
  margin-left: 0;
}
.category .entry > a {
  display: inline-block;
  line-height: 0;
}
.category .entry-header {
  background: rgba(255,255,255,0.75);
  display: block;
  height: 100%;
  padding: 15px;
  position: absolute;
  top: 0;
  width: 100%;
}
.category .entry-header .entry-title {
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
}
.category p.entry-meta {
  color: #222;
  margin: 60px auto 5px;
}
@media only screen and (max-width: 680px) {
  .category .col-3,
  .category .col-3:nth-of-type(3n+1) {
    clear: none;
    margin-left: 1.5%;
    width: 49.25%;
  }
  .category .col-3:nth-of-type(2n+1) {
    clear: both;
    margin-left: 0;
  }
}
@media only screen and (max-width: 400px) {
  .category .col-3,
  .category .col-3:nth-of-type(3n+1) {
    margin-left: 0;
    width: 100%;
  }
  .category .col-3:nth-of-type(2n+1) {
    clear: none;
    margin-left: 0;
  }
}

Chúc mừng. Tất cả đều đã xong. Bây giờ hãy duyệt qua trang lưu trữ danh mục của bạn và tận hưởng nó.