Divi: ธีม WordPress ที่ดีที่สุดของเวลาทั้งหมด!

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

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

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

เทมเพลตบน WordPress คืออะไร?

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

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

แอตทริบิวต์รายการ

เมื่อบันทึกเทมเพลตในธีมแล้วสามารถเลือกได้ในหน้าแก้ไขบทความ

การเตรียมพื้นดินสำหรับการใช้แบบจำลอง

เราจะทำงานในตัวอย่าง

เพื่อทดสอบสิ่งนี้เราจำเป็นต้องสร้างธีมลูกก่อน ใช้  ยี่สิบเจ็ด ธีม WordPress เริ่มต้นใหม่

สร้างเว็บไซต์ของคุณอย่างง่ายดายด้วย Elementor

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

ในการเริ่มต้นให้สร้างโฟลเดอร์ใหม่ในไดเร็กทอรีธีม ฉันมีชื่อของฉันว่า "cPPT" (ย่อมาจากเทมเพลตประเภทโพสต์ที่กำหนดเอง) จากนั้นฉันก็เพิ่มไฟล์ใหม่: style.css et functions.php . ใช้รหัสด้านล่างเพื่อกำหนดค่าไฟล์เหล่านี้:

/ * ชื่อธีม: ที่กำหนดเองโพสต์ประเภทธีมตัวอย่างแม่ URI: http://blair-jersyer.com คำอธิบาย: มีรูปแบบตัวอย่างที่ใช้ประเภทโพสต์ที่กำหนดเองแม่ผู้แต่ง: ดาเนียลพาตากิผู้แต่ง URI: http://blair-jersyer.com แม่แบบ : รุ่น twentyseventeen: 1.0.0 * /
<?php

add_action( 'wp_enqueue_scripts', 'cptt_assets' );
function cptt_assets() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ));
}

หมดกัน! ตอนนี้คุณควรเห็นธีมลูกในส่วนลักษณะที่ปรากฏของแดชบอร์ด WordPress ของคุณ เมื่อเปิดใช้งานคุณจะเห็นวานิลลาที่ไม่ได้ปรับเปลี่ยนซึ่งมาจากธีมหลัก

สร้างรูปแบบโพสต์ที่กำหนดเอง

เราจะเริ่มต้นด้วยการทดสอบระบบเทมเพลตด้วยรูปแบบการประกาศที่กำหนดเอง ลองนึกภาพว่าคุณกำลังสร้างเว็บไซต์ที่เกี่ยวข้องกับวิดีโอเกม

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

หากต้องการสร้างความแตกต่างทางสายตาคุณจำเป็นต้องใช้หมวดหมู่หรืออุปกรณ์ตามอำเภอใจ เทมเพลตทำให้กระบวนการง่ายขึ้นมาก

add_action ('init', 'cptt_custom_post_types'); ฟังก์ชัน cptt_custom_post_types () {register_post_type ('game', array ('label' => array ('name' => __ ('Video Games'), 'singular_name' => __ ('Video Game')), 'public' => true, 'has_archive' => true, 'supports' => array ('title', 'editor', 'screenshot'), 'menu_icon' => 'dashicons-laptop')); }

ฉันละเว้นป้ายกำกับและตัวเลือกบางอย่าง แต่รหัสนี้จะเพียงพอสำหรับวัตถุประสงค์ที่เราต้องการบรรลุ

การสร้างเทมเพลต

เทมเพลตคือไฟล์ PHP ปกติที่มีความคิดเห็นพิเศษอยู่ด้านบนซึ่งจะบอกชื่อเทมเพลตและตำแหน่งที่ควรใช้

เราจะสร้างหนึ่งสำหรับรีวิววิดีโอเกม

<?php
/*
Template Name: Critique de Jeu
Template Post Type: game
*/

เมื่อคุณสร้างโพสต์วิดีโอเกมใหม่คุณจะเห็นตัวเลือกปรากฏขึ้นพร้อมสองตัวเลือก: "ค่าเริ่มต้น" และ "รีวิวเกม" เมื่อคุณเลือกเทมเพลตแล้วระบบจะใช้รหัสภายในเทมเพลต

การใช้เทมเพลต

 

รีวิววิดีโอเกม
ในการสร้างมุมมองสิ่งที่ฉันจะทำคือคัดลอกจาก Twenty Seventeen ฉันสร้างไฟล์ซึ่งเรียกว่า "template-game-review.php" ด้วยรหัสต่อไปนี้:
' '. __ ('บทความก่อนหน้า', 'twentyseventeen') ' '. __ ('ก่อนหน้า', 'twentyseventeen') ' '. twentyseventeen_get_svg (อาร์เรย์ ('icon' => 'arrow-left')) ' % title ', 'next_text' => ' ' __ ('โพสต์ถัดไป', 'twentyseventeen') ' '. __ ('ถัดไป', 'twentyseventeen') " % title " twentyseventeen_get_svg (อาร์เรย์ ('icon' => 'ลูกศรขวา')) ' ',)); ในที่สุด; // สิ้นสุดลูป ?>

ฉันได้คัดลอกโค้ดทั้งหมดนี้จาก "Twenty Seventeen" ฉันแก้ไขฟังก์ชัน "get_header" ด้วยพารามิเตอร์เดียวดังนั้นจึงทำให้เกิดส่วนหัวที่แตกต่างกัน ฉันยังแก้ไขพารามิเตอร์ของเทมเพลต "get_template_part ()" เพื่อให้เป็นแบบนี้: "get_template_part ('template-parts / game / content', 'review'); ".

จากนั้นฉันสร้างไฟล์สำหรับส่วนหัวซึ่งฉันชื่อ "header-review.php" และฉันวางโค้ดจากไฟล์ "header.php" ของ Twenty Seventeen และฉันก็ลบบรรทัดต่อไปนี้:


จากนั้นฉันก็สร้างไฟล์ "template-parts / game / content-review.php" ฉันวางโค้ดจาก "content.php" ของ Twenty Seventeen และลบโค้ดสองสามบรรทัดที่ไม่จำเป็นจริงๆ ฉันเพิ่มรหัสนี้ที่ด้านบนสุด:

รีวิววิดีโอฉบับเต็ม

ฉันเพิ่มโค้ด CSS ต่อไปนี้:

.site เนื้อหามี {position: การคงที่; } # รีวิว -Head {position: absolute; ด้านบน: 55px; ซ้าย: 0px; padding: 22px; สี: # fff; ความกว้าง: 100%; text-align: ศูนย์; พื้นหลัง: RGBA (0,0,0,0.3); } # -Head ทบทวน h1 {font-weight: 300; margin: 0px; padding: 0px; } # รีวิว -Head เล็ก {สี: สี RGBA (255,255,255,0.5); font-weight: 500; ข้อความเปลี่ยน: พิมพ์ใหญ่; font-size: 11px; ตัวอักษรระยะห่าง: 1px}

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

 

15 หุ้น
หุ้น10
ทวีต1
Enregistrer4