Tạo hiệu ứng bàn cờ với các bài đăng nổi bật trên Trang chủ của Atmosphere Pro

Thủ thuật WordPress
1

Yêu cầu

  • WordPress 4.0+
  • Genesis 2.2.0+
  • Chủ đề Atmosphere Pro
  • Plugin kết hợp các bài đăng nổi bật của Genesis

Bước 1

Kéo và thả tiện ích “Tổ hợp các bài đăng nổi bật của Genesis” vào vùng tiện ích Trang 3 . Bây giờ hãy định cấu hình các tùy chọn sau:
  • Bố cục: Toàn chiều rộng (bố cục số 7)
  • Loại bài: Đăng. Bạn có thể chọn CPT.
  • Chọn hộp kiểm Hiển thị Tiêu đề Bài đăng
  • Kiểm tra hộp kiểm Thông tin bài đăng
  • Nhập “[post_date] <span class =” sep ”> / </span> [post_categories before =" "]” vào hộp văn bản Thông tin bài đăng
  • Giới hạn nội dung bài đăng: 220
  • Chọn hộp kiểm Hiển thị Hình ảnh Nổi bật
  • Kích thước hình ảnh: Trang trước nổi bật (640 × 640)
  • Số lượng bài viết: 3
Nhấn vào nút "Lưu" và lưu tiện ích con.

Bước 2

Bây giờ, hãy thêm các tập lệnh sau vào tệp functions.php của bạn. 
/**
* Creating checkerbord effect using Genesis Featured Posts Combo Plugin
* 
* @author Chinmoy Paul
* @copyright Copyright (c) 2016, Genesis Developer 
* @license GPL-2.0+
* @link http://genesisdeveloper.me/creating-checkerboard-effect-featured-posts-atmosphere-pro-home-page/
*/ 
//* Copy the code below this line. Add the code in your functions.php file
add_action( 'genesis_meta', 'gfpc_checkerboard_effect' );
function gfpc_checkerboard_effect() {
if( ! is_front_page() )
return;
//* assign a variable. using for image alignment and post counter
global $loop_counter;
$loop_counter = 1;
//* Add pre-defined "featured-content" class in GFPC widget markup
add_filter('dynamic_sidebar_params', 'add_class_to_gfpc_widget'); 
function add_class_to_gfpc_widget($params) {
if ( $params[0]['widget_id'] == "gfpc-widget-2" ) { //make sure its your widget id here
$class_to_add = 'class="featured-content ';
$params[0]['before_widget'] = str_replace( 'class="', $class_to_add, $params[0]['before_widget'] );
}
return $params;
}
/**
* Align the featured image at left or right side of entry content
* Also replacing the image class with new class
* 
* @param $image String
* @param $instance Object GFPC widget instance
* 
* @return string $image Featured Image HTML
*/ 
add_filter( 'gfpc_do_post_image_gfpc-widget-2', 'gfpc_featured_image_class', 10, 2 );
function gfpc_featured_image_class( $image, $instance ) {
global $loop_counter;
if( $loop_counter % 2 == 0 )
$class = 'alignleft';
else
$class = 'alignright';
$image = str_replace( array( 'alignnone', 'alignleft', 'alignright' ), 'entry-image attachment-page', $image );
$image = str_replace( '<a', '<a class="'.$class.'"', $image );
return $image; 
}
remove_action( 'gfpc_entry_header', 'gfpc_do_post_info', 12, 2 );
add_action( 'gfpc_entry_header', 'gfpc_do_post_info', 6, 2 );
/**
* Show Post title and fitting the design with Atmosphere Pro featured pages title design
* 
* @param $title String Post Title
* @param $instance Object GFPC widget instance
* 
* @return String $title
*/ 
add_filter( 'gfpc_do_post_title_gfpc-widget-2', 'gfpc_post_title', 10, 2 );
function gfpc_post_title( $title, $instance ) {
global $loop_counter;
preg_match( '#<a[^>]+>(.+?)</a>#ims', $title, $match ); 
$large_title = '<span class="atmosphere-large-text">' . sprintf( "%02d", $loop_counter ) . '</span>
<span class="intro">'. $match[1] . '</span></a>' . "\n";
return str_replace( $match[1] . '</a>', $large_title, $title );
}
/**
* Increment loop counter by one
* Returning early if widget ID is not matching with my GFPC widget
* 
* @param $instance Object GFPC widget instance
* @param $widget_id String GFPC widget ID
* 
* @return void
*/
add_action( 'gfpc_entry_footer', 'gfpc_loop_counter', 20, 2 );
function gfpc_loop_counter( $instance, $widget_id ) {
if( $widget_id != 'gfpc-widget-2' )
return;
global $loop_counter; 
$loop_counter++;
}
/**
* Echo share buttons below the entry content.
* 
* @param $instance Object GFPC widget instance
* @param $widget_id String GFPC widget ID
*/
add_action( 'gfpc_entry_footer', 'gfpc_post_share', 10, 2 );
function gfpc_post_share( $instance, $widget_id ) {
if ( has_post_thumbnail() ) {
$image = wp_get_attachment_url( get_post_thumbnail_id() );
}
$fb = 'ion ion-social-facebook'; 
$tw = 'ion ion-social-twitter';
$pin = 'ion ion-social-pinterest';
$gp = 'ion ion-social-googleplus'; 
$ln = 'ion ion-social-linkedin';
$reddit = 'ion ion-social-reddit';
?>
<div class="post-sharing">
<p class="label"><?php _e( 'Share This Article', 'gfpc' ); ?></p>
<ul class="social-sharing">
<li class="facebook">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink() ; ?>"><i class="<?php echo $fb; ?>"></i></a>
</li>
<li class="twitter">
<a target="_blank" href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&via=genesisdevelopr&url=<?php echo get_permalink() ; ?>"><i class="<?php echo $tw; ?>"></i></a>
</li>
<li class="pinterest">
<a target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php echo get_permalink() ; ?>&amp;media=<?php echo esc_url( $image ); ?>"><i class="<?php echo $pin; ?>"></i></a>
</li>
<li class="google-plus">
<a target="_blank" href="https://plus.google.com/share?url=<?php echo get_permalink(); ?>"><i class="<?php echo $gp; ?>"></i></a>
</li>
<li class="linkedin">
<a target="_blank" href="http://linkedin.com/shareArticle?mini=true&amp;url=<?php echo get_permalink() ; ?>&amp;title=<?php the_title() ; ?>"><i class="<?php echo $ln; ?>"></i></a>
</li>
<li class="reddit">
<a target="_blank" href="http://www.reddit.com/submit?url=<?php echo get_permalink(); ?>&amp;title=<?php the_title(); ?>"><i class="<?php echo $reddit; ?>"></i></a>
</li>
</ul>
</div>
<?php
}
}
ID tiện ích GFPC của tôi là gfpc-widget-2 . Tôi đã tạo bộ lọc và móc dựa trên ID tiện ích con GFPC của mình. Bạn sẽ thay thế ID tiện ích bằng ID tiện ích GFPC của mình. Giải thích mã ở bên dưới:

15-16: Quay lại sớm nếu người dùng không truy cập trang chủ
19-20: Tạo một biến toàn cục mới được sử dụng để căn chỉnh hình ảnh nổi bật và tiêu đề bài đăng. Đặt giá trị ban đầu là 1.
23-30: Thêm tên lớp CSS xác định trước (.featured-content) vào đánh dấu tiện ích con GFPC. Vì vậy, bạn không yêu cầu thêm bất kỳ CSS nào để tạo kiểu.
41-54: Đặt căn chỉnh hình ảnh nổi bật dựa trên biến $ loop_counter . Hình ảnh sẽ căn chỉnh ở bên trái nếu bộ đếm vòng lặp bài đăng đang chia cho 2. Nếu không nó sẽ căn chỉnh ở bên phải nội dung bài đăng.
56-57: Định vị lại thông tin bài đăng. Theo mặc định, thông tin bài đăng sẽ xuất hiện ở bên dưới tiêu đề bài viết. Tôi đang di chuyển nó lên trên tiêu đề bài viết.
67-76: Chỉ phù hợp với phong cách của tiêu đề bài đăng nổi bật với phong cách của tiêu đề trang nổi bật.
87-94: Tăng bộ đếm vòng lặp lên 1. Quay lại sớm nếu ID tiện ích con không khớp với ID tiện ích con GFPC của tôi.
102-148: Thêm biểu tượng chia sẻ xã hội bên dưới nội dung mục nhập. Chủ đề Atmosphere Pro đang sử dụng phông chữ IonIcons. Vì vậy, tôi đang sử dụng cùng một phông chữ cho các biểu tượng chia sẻ xã hội.

Bước 3

Thêm CSS sau vào tệp style-front.css của bạn. CSS này dành cho các biểu tượng chia sẻ trên mạng xã hội. 
.featured-content .post-sharing {
  display: table;
  margin: 30px auto 0;
  text-align: center;
}
.featured-content .post-sharing .label {
  color: #999;
  font-size: 14px;
  letter-spacing: 0.2em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.featured-content .social-sharing li {
  display: inline-block;
  list-style-type: none;
  margin-bottom: 8px;
  margin-right: 8px;
}
.featured-content .social-sharing li a {
  border: 1px solid #999;
  border-radius: 100%;
  color: #999;
  display: inline-block;
  font-size: 14px;
  height: 30px;
  line-height: 29px;
  text-align: center;
  width: 30px;
}
.entry-meta span.sep {
  margin: 0 5px;
}
.featured-content.gfpc-widget .entry-meta .entry-categories,
.featured-content.gfpc-widget .entry-meta .entry-tags {
    display: inline;
}
Tất cả đều đã xong.