Thêm mẫu danh mục cho danh mục đầu tư vào Genesis Modern Portfolio Pro

Cuối tuần này, con gái tôi quyết định cần cập nhật trang web danh mục đầu tư thiết kế của mình. Trang web hiện tại của cô ấy là một trang web html mà cô ấy đã làm khi còn đi học. Cô ấy muốn chuyển trang web của mình sang WordPress và cô ấy muốn làm điều đó nhanh chóng. Tôi cũng không có nhiều thời gian để giúp cô ấy, vì vậy chúng tôi quyết định bắt đầu với chủ đề Genesis Modern Portfolio Pro, vì nó có tùy chọn hiển thị các bài đăng danh mục đầu tư mới nhất trên trang nhất theo bố cục lưới và nó sẽ dễ dàng cho cô ấy để chỉnh sửa các phong cách.

Chúng tôi thiết lập chủ đề theo hướng dẫn từ StudioPress và con gái tôi bắt đầu tải lên hình ảnh và nội dung của mình. Và đó là khi cô ấy nhận ra rằng Modern Portfolio Pro hiển thị tất cả các bài đăng bằng cách sử dụng bố cục blog (kho lưu trữ) bình thường với tiêu đề, hình ảnh thu nhỏ và nội dung. Cô ấy muốn một trang cho danh mục thiết kế của mình hiển thị giống hệt với khu vực danh mục đầu tư của trang chủ. Cô ấy cũng muốn sử dụng một bài đăng bình thường chứ không phải một loại bài đăng tùy chỉnh cho các bài viết thiết kế của mình, vì vậy điều đó đã loại trừ một plugin danh mục đầu tư.

Chúng tôi quyết định tạo một mẫu mới chỉ dành cho danh mục thiết kế. Chúng tôi đã bắt đầu với mẫu lưu trữ loại bài đăng tùy chỉnh danh mục đầu tư từ chủ đề Minimum Pro. Bạn cũng có thể tạo mẫu danh mục của riêng mình.

Bạn có thể tải xuống GitHub Gist để bắt đầu mẫu danh mục thiết kế của mình.

Và nếu bạn muốn thay đổi số lượng bài đăng trên mỗi trang cho kho lưu trữ thiết kế của mình, hãy xem Thay đổi số bài đăng trên mỗi trang…

Tạo mẫu danh mục

Lưu ý rằng mẫu này sẽ hiển thị trang danh mục: YouRite.com is for sale | HugeDomains hoặc / category / your-slug. Sau khi hoàn thành, trang này cũng có thể được thêm vào menu chính của bạn trong Giao diện> Trình đơn.

Chúng tôi đã chỉnh sửa mẫu gốc như sau; bạn sẽ muốn làm theo để có thể cá nhân hóa mẫu của riêng mình, bằng cách sử dụng mã trong phần tiếp theo.

  1. Điều đầu tiên chúng tôi làm là đổi tên mẫu để phù hợp với danh mục thiết kế → category-design.php. Điều này sẽ hiển thị các bài đăng trong danh mục Thiết kế với slug “thiết kế”.
    Nếu danh mục của bạn là “Design Portfolio” và slug của bạn là “design-portfolio”, bạn sẽ đặt tên cho template là category-design-portfolio.php.
    Định dạng để đặt tên cho mẫu của bạn là category- {slug} .php. Bạn có thể tìm hiểu thêm về Hệ thống phân cấp mẫu WordPress, đặc biệt là biểu đồ.
  2. Tiếp theo, thay đổi mô tả của mẫu ở đầu mẫu của bạn. Đây có thể là bất cứ thứ gì bạn thích.
  3. Minimum Pro hiển thị hình ảnh trong lưới hai cột. Chúng tôi cần một lưới ba cột, vì vậy chúng tôi đã loại bỏ phần thêm các lớp bài đăng lẻ và chẵn.
  4. Sau đó, chúng tôi chuyển hình ảnh đến genesis_entry_header, phía trên tiêu đề.
  5. Điều cuối cùng chúng tôi xem xét là kích thước hình ảnh tùy chỉnh. Cả hai chủ đề đều sử dụng kích thước hình ảnh tùy chỉnh “portfolio”, vì vậy chúng tôi không cần chỉnh sửa điều đó.
  6. Chúng tôi đã giữ lại tất cả các phần loại bỏ entry-header, entry-footer và nội dung.

Mẫu thiết kế danh mục

Đây là toàn bộ mẫu danh mục thiết kế với các phần mã được nhận xét.
Đặt tên tệp theo mục 1. ở trên.

/**
 * The custom template for the design category
 */

//* Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

//* Remove the entry meta in the entry header
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

//* Remove the entry content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );

//* Remove the entry image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );

//* Add the featured image before post title
add_action( 'genesis_entry_header', 'minimum_portfolio_grid', 8 );
function minimum_portfolio_grid() {

	if ( $image = genesis_get_image( 'format=url&size=portfolio' ) ) {
		printf( '<div class="portfolio-image"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
	}
}

//* Remove the entry meta in the entry footer
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );

//* Run the Genesis loop
genesis();

Sử dụng FTP để thêm mẫu vào thư mục chủ đề con của bạn (YouRite.com is for sale | HugeDomains).

Giờ đây, các hình ảnh có kích thước giống như trang chủ, nhưng chúng chỉ chảy xuống trang thay vì hiển thị trong một lưới ba chiều. Và các tiêu đề là một chút lớn.

Tạo kiểu cho mẫu danh mục mới

Mở style.css chủ đề con của bạn trong trình soạn thảo văn bản. Tìm phần Trang chủ. Bạn muốn thêm một phần mới bên dưới có tên là Mục thiết kế danh mục. Chúng tôi có thể sử dụng CSS trong phần Trang chủ cho bộ chọn bài đăng nổi bật để tạo lại cùng một bố cục cho trang thiết kế của chúng tôi. Nhận xét giải thích từng bộ chọn.
Lưu ý rằng bạn nhắm mục tiêu các bộ chọn với lớp nội dung cho danh mục của bạn; đối với chúng tôi đó là .category-design . Nó giống với tên mẫu của bạn: .category- {slug}

Lưới được tạo bằng: nth-of-type. Bạn có thể đọc thêm về cách sử dụng: n-of-type để nhắm mục tiêu các bộ chọn.

/* Category Design Entries
--------------------------------------------- */

/* Adds the opacity and hover feature to images */
.category-design img {
	margin-bottom: 16px;
	margin-bottom: 1.6rem;
	opacity: 0.8;
}

.category-design  img:hover {
	opacity: 1;
}

/* Adds the grid column width the same as the home page */
.category-design .entry {
	float: left;
	margin-right: 5.263157894737%; /* 60px / 1140px */
	width: 29.824561403509%; /* 340px / 1140px */
}

/* Removes the right margin on the 3rd, 6th, 9th, etc. posts */
.category-design .entry:nth-of-type(3n+3) {
	margin-right: 0;
}

/* Clears the float to start a new row for the 4th, 7th, etc. posts */
.category-design .entry:nth-of-type(3n+1) {
	clear: left;
}

/* Smaller title size */
.category-design .entry-title {
	font-size: 18px;
}

Thêm kiểu cho điện thoại di động

Ở kích thước màn hình nhỏ hơn, bạn muốn các bài đăng chỉ có một, thay vì ba.

Vì vậy, hãy tìm phần @media, @media only screen and (max-width: 600px) {

Thêm CSS sau:

@media only screen and (max-width: 600px) {
	/* Category Design Entries 
	--------------------------------------- */
	
	/* Centers the posts or entries */
	.category-design .entry {
		text-align: center;
	}
	
	/* Removes the three across grid */
	.category-design .entry,
	.category-design .entry:nth-of-type(3n+3) {
		float: none;
		margin: 0 auto 24px;
		margin: 0 auto 2.4rem;
		max-width: 340px;
		width: 100%;
	}
}

Thêm tiêu đề vào trang thiết kế danh mục

  1. Từ Bảng điều khiển WordPress của bạn, nhấp vào Bài đăng> Danh mục.
  2. Nhấp vào danh mục Thiết kế (hoặc của bạn).
  3. Cuộn xuống cho đến khi bạn thấy Cài đặt Lưu trữ Danh mục.
  4. Thêm một Tiêu đề Lưu trữ và, nếu bạn thích, Lưu trữ Văn bản Giới thiệu.

Vì vậy, bây giờ bạn có một mẫu đẹp để hiển thị danh mục thiết kế của bạn trong một bố cục ba danh mục đầu tư.