สร้างหน้าเอกสารหมวดหมู่สไตล์ผลงานหลายหน้าใน Crystal Theme

เผยแพร่แล้ว: 2013-07-24

การทำสำเนาหน้าพอร์ตใน Genesis ต้องใช้การเข้ารหัสในปริมาณที่พอเหมาะ ขึ้นอยู่กับธีมที่คุณใช้ คุณอาจใช้หน้าพอร์ตโฟลิโอเพื่อแสดงคลังหมวดหมู่ของคุณได้

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างหน้าพอร์ตโฟลิโอหลายหน้าซึ่งคุณสามารถใช้เพื่อแสดงโพสต์ที่กำหนดให้กับที่เก็บถาวรของหมวดหมู่ใด ๆ หรือทั้งหมดในเค้าโครงพอร์ตโฟลิโอ

อัปเดต: ไม่ได้ใช้ธีม Crystal ใช่ไหม นี่คือโพสต์ที่คุณสามารถใช้วิธีการเดียวกันในการแปลงไฟล์เก็บถาวรหมวดหมู่เป็นหน้าไฟล์เก็บถาวรสไตล์พอร์ตโฟลิโอโดยใช้ธีมย่อยที่สร้างจากเฟรมเวิร์กธีมที่ดีที่สุดสำหรับ WordPress

เราจะใช้ธีมลูก Crystal โดย StudioPress เนื่องจากใช้เทมเพลตหน้าพอร์ตโฟลิโอที่แสดงโพสต์ในหมวดหมู่เฉพาะ

ชื่อที่ฉันจะใช้สำหรับพอร์ตโฟลิโอที่สองคือ พอร์ต ที่สองซึ่งใช้สำหรับชื่อของหมวดหมู่และโพสต์กระสุนถูกกำหนดให้กับไฟล์เก็บถาวรสไตล์พอร์ตโฟลิโอนี้

กระบวนการนี้เกี่ยวข้องกับการทำซ้ำและเปลี่ยนชื่อฟังก์ชันและคลาสเหล่านี้:

  • เพิ่มการตั้งค่าธีม Crystal ให้กับการตั้งค่าธีมเริ่มต้นของ Genesis
  • เพิ่มกล่องการตั้งค่าผลงานไปยังการตั้งค่าธีมปฐมกาล
  • ชื่อแม่แบบ: Portfolio
  • โค้ด CSS สำหรับคลาสพอร์ตโฟลิโอ

หน้าหมวดหมู่ผลงานหลายหน้า

นี่คือภาพหน้าจอจริงที่แสดงให้คุณเห็นว่าผลลัพธ์เป็นอย่างไรหลังจากสร้างหน้าเก็บถาวรหมวดหมู่สไตล์พอร์ตโฟลิโอ 2 หน้า

ผลงานเดี่ยว

และหน้าหมวดหมู่ผลงานที่ซ้ำกัน

ผลงานที่สอง

เพิ่มการตั้งค่าธีม Crystal ให้กับการตั้งค่าธีมเริ่มต้นของ Genesis

นี่คือรหัสที่คัดลอกมาจากฟังก์ชันพอร์ตโฟลิโอและวางไว้ที่ส่วนท้ายของไฟล์ Crystal themes functions.php

 // Add Crystal theme settings to Genesis default theme settings add_filter( 'genesis_theme_settings_defaults', 'crystal_portsecond_settings' ); function crystal_portsecond_settings( $defaults ) { $defaults['crystal_portsecond_content'] = 'excerpts'; return $defaults; } add_action( 'admin_menu', 'crystal_portsecond_settings_init', 25 ); /** * This is a necessary go-between to get our scripts and boxes loaded * on the theme settings page only, and not the rest of the admin */ function crystal_portsecond_settings_init() { global $_genesis_admin_settings; add_action( 'load-' . $_genesis_admin_settings->pagehook, 'crystal_add_portsecond_settings_box', 20 ); } // Add portsecond Settings box to Genesis Theme Settings function crystal_add_portsecond_settings_box() { global $_genesis_admin_settings; add_meta_box( 'genesis-theme-settings-crystal-portsecond', __( 'Portsecond Page Settings', 'crystal' ), 'crystal_theme_settings_portsecond', $_genesis_admin_settings->pagehook, 'main' ); } function crystal_theme_settings_portsecond() { ?> <p><?php _e( "Display which category:", 'genesis' ); ?> <?php wp_dropdown_categories( array( 'selected' => genesis_get_option( 'crystal_portsecond_cat' ), 'name' => GENESIS_SETTINGS_FIELD.'[crystal_portsecond_cat]', 'orderby' => 'Name' , 'hierarchical' => 1, 'show_option_all' => __( "All Categories", 'genesis' ), 'hide_empty' => '0' )); ?></p> <p><?php _e( "Exclude the following Category IDs:", 'genesis' ); ?><br /> <input type="text" name="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portsecond_cat_exclude]" value="<?php echo esc_attr( genesis_get_option( 'crystal_portsecond_cat_exclude' ) ); ?>" size="40" /><br /> <small><strong><?php _e( "Comma separated - 1,2,3 for example", 'genesis' ); ?></strong></small></p> <p><?php _e( 'Number of Posts to Show', 'genesis' ); ?>: <input type="text" name="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portsecond_cat_num]" value="<?php echo esc_attr( genesis_option('crystal_portsecond_cat_num') ); ?>" size="2" /></p> <p><span class="description"><?php _e( '<b>NOTE:</b> The portsecond Page displays the "portsecond Page" image size plus the excerpt or full content as selected below.', 'crystal' ); ?></span></p> <p><?php _e( "Select one of the following:", 'genesis' ); ?> <select name="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portsecond_content]"> <option style="padding-right:10px;" value="full" <?php selected('full', genesis_get_option('crystal_portsecond_content')); ?>><?php _e("Display post content", 'genesis'); ?></option> <option style="padding-right:10px;" value="excerpts" <?php selected('excerpts', genesis_get_option('crystal_portsecond_content')); ?>><?php _e("Display post excerpts", 'genesis'); ?></option> </select></p> <p><label for="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portsecond_content_archive_limit]"><?php _e( 'Limit content to', 'genesis' ); ?></label> <input type="text" name="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portsecond_content_archive_limit]" id="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portsecond_content_archive_limit]" value="<?php echo esc_attr( genesis_option( 'crystal_portsecond_content_archive_limit' ) ); ?>" size="3" /> <label for="<?php echo GENESIS_SETTINGS_FIELD; ?>[crystal_portsecond_content_archive_limit]"><?php _e( 'characters', 'genesis' ); ?></label></p> <p><span class="description"><?php _e( '<b>NOTE:</b> Using this option will limit the text and strip all formatting from the text displayed. To use this option, choose "Display post content" in the select box above.', 'genesis' ); ?></span></p> <?php } [/code] <h3>New Template Page</h3> This is the PHP code which needs to be pasted into a new file using a <a href="http://wpsites.net/tools/windows-text-editor-notepad/">text editor</a> like Notepad++ and named page_portsecond.php [code] <?php // Template Name: Portsecond // Force layout to full-width-content add_filter('genesis_pre_get_option_site_layout', 'crystal_portsecond_layout'); function crystal_portsecond_layout($layout) { $layout = 'full-width-content'; return $layout; } // Add .teaser class to every post, except first 2 add_filter('post_class', 'portsecond_post_class'); function portsecond_post_class( $classes ) { $classes[] = 'portsecond'; return $classes; } // Modify length of post excerpts add_filter('excerpt_length', 'custom_excerpt_length'); function custom_excerpt_length($length) { return 15; // pull first 15 words } // Add "View project" link add_filter('the_excerpt', 'child_homepage_excerpt_filter'); function child_homepage_excerpt_filter( $text ) { return sprintf( '%s<a href="%s" class="more-link">%s</a>', $text, get_permalink(), __('View Project', 'crystal') ); } // Remove post info and meta info remove_action('genesis_after_post_content', 'genesis_post_meta'); remove_action('genesis_before_post_content', 'genesis_post_info'); // Move title above post image remove_action('genesis_post_title', 'genesis_do_post_title'); add_action('genesis_post_content', 'genesis_do_post_title', 9); // Remove default content for this Page Template remove_action('genesis_post_content', 'genesis_do_post_image'); remove_action('genesis_post_content', 'genesis_do_post_content'); // Add Featured Image for the portsecond posts in this Page Template add_action('genesis_post_content', 'crystal_portsecond_do_post_image'); function crystal_portsecond_do_post_image() { $img = genesis_get_image( array( 'format' => 'html', 'size' => 'Portsecond Thumbnail', 'attr' => array( 'class' => 'alignnone post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute('echo=0'), $img ); } // Add Content for the portsecond posts in this Page Template add_action('genesis_post_content', 'crystal_portsecond_do_post_content'); function crystal_portsecond_do_post_content() { if ( genesis_get_option('crystal_portsecond_content') == 'excerpts' ) { the_excerpt(); } else { if ( genesis_get_option('crystal_portsecond_content_archive_limit') ) the_content_limit( (int)genesis_get_option('crystal_portsecond_content_archive_limit'), __('View Project', 'crystal') ); else the_content(__('View Project', 'crystal')); } } // Clear float using genesis_custom_loop() $loop_counter variable // Outputs clearing div after every 4 posts // $loop_counter is incremented after this function is run add_action('genesis_after_post', 'portsecond_after_post'); function portsecond_after_post() { global $loop_counter; if ( $loop_counter == 3 ) { $loop_counter = -1; echo '<div class="clear"></div>'; } } // Remove standard loop remove_action('genesis_loop', 'genesis_do_loop'); // Add custom loop add_action('genesis_loop', 'portsecond_loop'); function portsecond_loop() { $paged = get_query_var('paged') ? get_query_var('paged') : 1; $include = genesis_get_option('crystal_portsecond_cat'); $exclude = genesis_get_option('crystal_portsecond_cat_exclude') ? explode(',', str_replace(' ', '', genesis_get_option('crystal_portsecond_cat_exclude'))) : ''; $cf = genesis_get_custom_field('query_args'); // Easter Egg $args = array('cat' => $include, 'category__not_in' => $exclude, 'showposts' => genesis_get_option('crystal_portsecond_cat_num'), 'paged' => $paged); $query_args = wp_parse_args($cf, $args); genesis_custom_loop( $query_args ); } genesis();

โค้ด CSS

นี่คือโค้ด CSS ที่ต้องเพิ่มที่ส่วนท้ายของไฟล์ Crystal themes style.css

 /***** Portsecond ********************/ #content .portsecond { width: 210px; margin: 0 15px 20px 15px !important; float: left; overflow: hidden; } .page-template-pageportsecond-php #content .portsecond p { margin: 0; padding: 0; } #content .portsecond .entry-title { font-size: 18px; margin: 10px 0 0 0; line-height: 22px; } #content .portsecond .more-link { background: url(images/btn-more-bg.png) repeat-x top; width: 100px; display: block; padding: 5px 0 5px 0; margin: 10px 0 0 0; text-align: center; text-decoration: none; border-left: 1px solid #D4DBE1; border-right: 1px solid #D4DBE1; text-shadow: #FFFFFF 1px 1px; } #content .portsecond .more-link:hover { background: url(images/btn-more-bg.png) repeat-x 0px -30px; border-left: 1px solid #D0D9E0; border-right: 1px solid #D0D9E0; } #content .portsecond img { float: none; margin: 10px auto 10px; }

รหัสไม่แสดงอย่างถูกต้อง?

หยิบโค้ดทั้งหมด 3 บล็อกจากลิงก์ดูข้อมูลดิบบน Github

หมายเหตุ: มีการเข้ารหัสมากมายที่เกี่ยวข้องในการสร้างหน้าเก็บถาวรหมวดหมู่สไตล์พอร์ตโฟลิโอ โดยเฉพาะอย่างยิ่งหากคุณต้องการทำเช่นนี้กับหมวดหมู่ทั้งหมดของคุณ รหัสนี้ใช้งานได้ดังที่คุณเห็นในหน้าจอสั้นที่ด้านบนของโพสต์ ดังนั้นคุณจะต้องแน่ใจว่าคุณปฏิบัติตามคำแนะนำทั้งหมดอย่างแม่นยำ คำแนะนำเพิ่มเติมเกี่ยวกับการตั้งค่าหน้าพอร์ตโฟลิโอมีอยู่ในหน้าดาวน์โหลด StudioPress คุณจะสามารถเข้าถึงได้เมื่อคุณเป็นเจ้าของธีม Crystal child