ภาพขนาดย่อของบทความในหน้าปลั๊กอิน WordPress การเชื่อมต่อภาพขนาดย่อของ WordPress การตั้งค่าและการใช้งาน กำลังตรวจสอบการติดตั้งปลั๊กอินที่จำเป็น

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

ปลั๊กอินที่ยอดเยี่ยมสำหรับการแสดงประกาศของโพสต์และเพจ แสดงตามหมวดหมู่หรือแท็ก รูปแบบการแสดงผล 4 แบบให้เลือก ความสามารถในการปรับแต่งรูปลักษณ์ คุณสามารถแสดงชื่อหมวดหมู่ในหน้าประกาศได้ ดังนั้นเมื่อคุณคลิกที่หมวดหมู่ จะแสดงเฉพาะโพสต์จากหมวดหมู่นั้นเท่านั้น วิธีกำหนดค่าปลั๊กอิน –

วิดเจ็ตสุดยอดสำหรับแสดงประกาศโพสต์ แสดงตามหมวดหมู่ แท็ก ผู้เขียน ปรับแต่งรูปลักษณ์ ขนาดภาพ คุณสามารถเพิ่มวันที่ ผู้แต่ง หมวดหมู่ การตั้งค่าที่กว้างและยืดหยุ่น วิดเจ็ตที่ดีที่สุดสำหรับการแสดงโพสต์! วิธีกำหนดค่าปลั๊กอิน –

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

5. โพสต์กริด

ตารางโพสต์ที่ปรับเปลี่ยนได้มีสไตล์สุด ๆ ! การเลือกเอฟเฟ็กต์โฮเวอร์ การเลือกสีพื้นหลังของโพสต์ ผลผลิตตามหมวดหมู่ ฯลฯ วิธีกำหนดค่าปลั๊กอิน –

//ส่งออกภาพแรกจากฟังก์ชันโพสต์ first_post_image() ( global $post, $posts; $first_img = ""; ob_start(); ob_end_clean(); $output = preg_match_all("/ /i", $post->post_content, $matches); $first_img = $matches ; if(empty($first_img))( $first_img = "/wp-content/themes/THEME/images/noimages.jpg"; / / ระบุเส้นทางไปยังภาพที่จะแสดงตามค่าเริ่มต้น ) return $first_img )

สคริปต์ดึงภาพแรกจากโพสต์ แต่ถ้าไม่มี ก็จะใส่ภาพเริ่มต้น หากต้องการแสดงรูปภาพเริ่มต้น คุณต้องสร้างมันขึ้นมา โดยเรียกมันว่า noimages.jpg และวางไว้ในโฟลเดอร์ ภาพ- ในบรรทัดที่ 11 ป้อนเส้นทางไปยังรูปภาพ

1. เราเปิดใช้งานฟังก์ชั่นการแสดงภาพแรกในหัวข้อ

ภาพขนาดย่อจะรวมอยู่ในไฟล์ทั้งหมดที่แสดงบันทึกแบบวนซ้ำ - นี่คือ index.php, content.php, archive.php, category.php, single.phpฯลฯ
ในการเชื่อมต่อ คุณจะต้องแทรกโค้ดต่อไปนี้หลังคำจำกัดความของลูป ซึ่งมีลักษณะดังนี้:

รหัสผลลัพธ์ของฟังก์ชันของเราเอง:

" title="(!ภาษา:!}"> " alt="(!ภาษา:!}" />

แต่ในการบันทึกคุณต้องแสดงภาพที่คลิกไม่ได้ ในการทำเช่นนี้คุณต้อง single.phpเพิ่มโค้ดแบบไม่มีลิงค์

" alt="(!ภาษา:!}" />

ตอนนี้จะไม่มีการโพสต์ในหัวข้อของคุณโดยไม่มีภาพขนาดย่อ

ตามที่ฉันเขียนไว้ข้างต้น ตอนนี้คุณไม่จำเป็นต้องเพิ่มภาพขนาดย่อในโพสต์ (แต่ยังคงไม่แสดงภาพเหล่านั้น) เพียงแค่แทรกรูปภาพที่จุดเริ่มต้นของโพสต์หรือในส่วนที่คุณต้องการ อันแรกจะกลายเป็นของจิ๋วโดยอัตโนมัติ

นอกจากนี้เล็กน้อยอีกประการหนึ่งของบทความ

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

" alt="(!ภาษา:!}" />

แน่นอนคุณเพิ่มคลาสสไตล์ของคุณและตกแต่งใน CSS จากนั้นภาพขนาดย่อของคุณจะมีลักษณะตามที่คุณต้องการ

เพียงเท่านี้ ขอบคุณสำหรับความสนใจของคุณ :)

คุณสมบัติที่น่าทึ่งใน WordPress!

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

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

โดยทั่วไปแล้ว โดยสรุปแล้ว ภาพขนาดย่อคือภาพตัวอย่างสำหรับโพสต์ที่:

• อาจหรืออาจจะไม่ใช้ในเนื้อหาโพสต์
• สามารถแสดงพร้อมกับลิงก์ไปยังโพสต์บนหน้าหมวดหมู่ แท็ก คลังข้อมูล ฯลฯ
• สามารถปรับเป็นขนาดที่กำหนดได้โดยอัตโนมัติ (ฉันหมายถึงความละเอียดของภาพ)

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

ขั้นตอนที่ 1: เปิดใช้งานการรองรับภาพขนาดย่อสำหรับธีม WordPress ของคุณ

หากต้องการใช้ภาพขนาดย่อบนไซต์ของคุณ คุณต้องเปิดใช้งานภาพขนาดย่อก่อน เนื่องจากฟังก์ชันนี้จะปิดไว้ตามค่าเริ่มต้น

สิ่งที่เราต้องทำเพื่อเปิดใช้งานภาพขนาดย่อคือวางบรรทัดโค้ดต่อไปนี้ลงในไฟล์ function.php ของคุณ (อาจมีไฟล์ชื่อนี้ได้หลายไฟล์ - เราต้องการไฟล์ที่อยู่ในโฟลเดอร์ที่มีธีมปัจจุบันของคุณโดยตรง)

หากคุณไม่ต้องการใช้ภาพขนาดย่อในทุกภาพพร้อมกัน คุณสามารถเชื่อมโยงภาพขนาดย่อเหล่านั้นได้ สำหรับโพสต์เท่านั้น:

หรือเฉพาะโพสต์และเฉพาะเพจเท่านั้น:

เป็นไปได้ไหมที่จะกำหนดภาพขนาดย่อให้กับอนุกรมวิธานของ WordPress?

ด้วยวิธีมาตรฐาน - ไม่ คุณสามารถใช้ปลั๊กอินใดก็ได้ที่เพิ่ม (รวมถึงหมวดหมู่และแท็ก) หรือเขียน URL รูปภาพในคำอธิบายขององค์ประกอบอนุกรมวิธานเฉพาะของคุณ

ขั้นตอนที่ 2 จะตั้งค่าภาพขนาดย่อสำหรับโพสต์ได้อย่างไร

โดยทั่วไป มีสองวิธีในการติดตั้งภาพขนาดย่อผ่านแผงผู้ดูแลระบบ พวกเขาไม่ได้แตกต่างกันมากนัก - คุณสามารถใช้อันที่คุณสะดวกกว่าได้

วิธีที่ 1 Metabox “โพสต์รูปขนาดย่อ”

เขาเป็นเช่นนี้:

ตัวอย่างนี้แสดงชื่อโพสต์ (ฟังก์ชัน) และภาพขนาดย่อของโพสต์พร้อมลิงก์ (ฟังก์ชัน) ไปยังโพสต์นั้น

ตัวอย่างเดียวกันสำหรับฟังก์ชัน:

รับ URL ภาพขนาดย่อโดยใช้ wp_get_attachment_image_src() และ get_post_thumbnail_id()

หากคุณต้องการความช่วยเหลือเกี่ยวกับเว็บไซต์ของคุณ หรือแม้กระทั่งการพัฒนาตั้งแต่เริ่มต้น -

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

และเพื่อไม่ให้ล่าช้า เราจะเริ่มตรวจสอบปัญหาทั้งหมดที่ระบุไว้ข้างต้นทันที

ภาพขนาดย่อของ WordPress คืออะไร และฉันจะใช้มันได้ที่ไหน?

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

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

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

กำลังตรวจสอบการรองรับธีม WordPress สำหรับภาพขนาดย่อ

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

หากเชื่อมต่อภาพขนาดย่อของ WordPress แล้วในคอลัมน์ด้านขวาเราจะเห็นหน้าต่างชื่อ "ภาพขนาดย่อของโพสต์" พร้อมลิงก์ไปยัง "ตั้งค่าภาพขนาดย่อ"

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

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

และโปรดทราบว่าเนื่องจากวิธีการแปลธีม ตัวเลือกนี้อาจถูกเรียกแตกต่างออกไป เช่น "รูปภาพลักษณะเฉพาะ" และลิงก์สำหรับสร้างภาพขนาดย่ออาจเป็นดังนี้: "ตั้งค่ารูปภาพพิเศษ"

การเชื่อมต่อภาพขนาดย่อของ WordPress และแสดงในประกาศบทความ

ในการเชื่อมต่อภาพขนาดย่อของ WordPress กับธีมของเรา คุณต้องเปิดไฟล์ function.php ในแผงผู้ดูแลระบบ หรือใช้โปรแกรมแก้ไขข้อความ NotePad++ และที่ด้านล่างสุดก่อนหน้า?> ให้เพิ่มโค้ดต่อไปนี้:

Add_theme_support("โพสต์ภาพขนาดย่อ");

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

ตอนนี้ฉันจะใช้มันในการประกาศบทความได้อย่างไร? หากต้องการแสดงภาพขนาดย่อบนหน้าหลัก คุณต้องเขียนโค้ดในไฟล์ index.php หรือ loop.php ในตำแหน่งที่ถูกต้อง:

หากคุณประสบปัญหาในการหาสถานที่ที่เหมาะสม เพียงค้นหารหัสนี้:

หรือเช่นนี้:

และก่อนหน้านั้น ให้ใส่โค้ดเพื่อแสดงภาพขนาดย่อของ WordPress

หลังจากขั้นตอนเหล่านี้และกำหนดภาพย่อในตัวแก้ไขโพสต์ WordPress สำเนาภาพขนาดเล็กจะปรากฏบนหน้าหลัก นอกจากนี้เรายังสามารถทำให้รูปภาพนี้เป็นลิงก์ไปยังบทความต่อได้ เมื่อต้องการทำเช่นนี้ ให้แทนที่โค้ดมาตรฐานด้วยโค้ดนี้:

" title="(!ภาษา:!}">

รายละเอียดเพิ่มเติมเล็กน้อยเกี่ยวกับรหัสนี้ประกอบด้วย:

• 1.แท็กเปิด และการปิด— แท็กสำหรับสร้างลิงค์ เขาคือผู้ที่จะทำให้ภาพขนาดย่อเป็นลิงก์
• 2.href="" - ลิงก์ไปยังบทความ
• 3. title="" — тайтл (заголовок) ссылки, который будет виден, при наведении на нее курсора. Берется из заголовка статьи.!}
• 4. — ฟังก์ชั่นเอาต์พุตภาพขนาดเล็ก

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

Img.wp-post-image(รูปแบบภาพขนาดย่อที่นี่)

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

ตัวเลือกภาพขนาดย่อของ WordPress

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

ตามค่าเริ่มต้น เราสามารถใช้ตัวเลือกต่อไปนี้สำหรับรูปภาพ:

The_post_ภาพย่อ(); // เอาต์พุตมาตรฐาน โดยไม่มีพารามิเตอร์ ซึ่งเราได้พูดถึงข้างต้น the_post_thumbnail("ภาพขนาดย่อ"); // สำเนารูปภาพขนาดเล็ก (ค่าเริ่มต้น 150px x 150px) สามารถกำหนดค่าได้จากแผงผู้ดูแลระบบ แต่ขนาดไม่ควรเกิน 150px the_post_thumbnail("medium"); // ขนาดกลาง (ค่าเริ่มต้น 300px x 300px) ความสามารถในการกำหนดค่าจากแผงผู้ดูแลระบบ the_post_thumbnail("ใหญ่"); // ขนาดใหญ่ (ค่าเริ่มต้น 640px x 640px) ความสามารถในการกำหนดค่าจากแผงผู้ดูแลระบบ the_post_thumbnail("เต็ม"); // ขนาดเต็ม (ขนาดภาพต้นฉบับ) the_post_thumbnail(อาร์เรย์(100,100)); //ขนาดของคุณ. สามารถกำหนดขนาดความกว้างและความสูงได้

หากต้องการใช้ตัวเลือกใดตัวเลือกหนึ่ง ก็เพียงพอที่จะแทนที่โค้ดมาตรฐาน (โดยไม่มีพารามิเตอร์) ด้วยโค้ดที่เสนอใด ๆ

ดังนั้น สำหรับแต่ละพารามิเตอร์ จึงมีตัวเลือกสำหรับไฟล์สไตล์ css

Img.wp-post-image img.attachment-thumbnail img.attachment-medium img.attachment-large img.attachment-full

การเลือกตัวเลือกโดยตรงขึ้นอยู่กับการเลือกพารามิเตอร์สำหรับภาพขนาดย่อ

กำหนดภาพขนาดย่อของ WordPress โดยอัตโนมัติและแสดงในประกาศบทความ

แต่จะเกิดอะไรขึ้นหากไซต์มีรายการเนื้อหาที่น่าประทับใจและการตั้งค่าภาพขนาดย่อด้วยตนเองจะเป็นปัญหาได้ ในการทำเช่นนี้ เราสามารถใช้ฟังก์ชันอื่นที่จะสร้างภาพขนาดเล็กจากภาพแรกของบทความโดยอัตโนมัติ เมื่อต้องการทำเช่นนี้ ในไฟล์ function.php หลังจาก ?> ให้เพิ่มฟังก์ชัน:

/i", $post->post_content, $matches); $first_img = $matches; return $first_img; ) ?>

ตอนนี้เพื่อแสดงภาพขนาดย่อในการประกาศบทความนั่นคือในหน้าหลักให้เปิดไฟล์ index.php หรือ loop.php แล้วเพิ่มโค้ดที่มีฟังก์ชันสำหรับแสดงภาพขนาดย่อ (ฟังก์ชันจากตัวอย่างก่อนหน้านี้สามารถทำได้ ถูกลบออก) ในตำแหน่งเดียวกับเอาต์พุตมาตรฐาน:

"src="" alt="(!ภาษา:" width="150" /> !}

ตอนนี้เรามาดูกันว่าโค้ดนี้ประกอบด้วยอะไรบ้าง

• 1. แท็ก — อันที่จริงแท็กนี้เองที่จะแสดงรูปภาพ เนื่องจากฟังก์ชันจะดึงลิงก์ไปยังรูปภาพแรกจากโพสต์เท่านั้น
• 2. title="" — тайтл (заголовок) изображения, который можно увидеть при наведении курсора на миниатюру записи wordpress.!}
• 3.src="" - ลิงก์ไปยังรูปภาพที่จะแสดง อย่างที่คุณเห็นนี่คือตำแหน่งของฟังก์ชันซึ่งมีหน้าที่รับผิดชอบลิงก์ไปยังรูปภาพขนาดเล็ก
• 4. alt="(!ภาษา:" — альтернативный текст изображения. В случаях, когда в браузере отключена загрузка изображений, будет появляться alt, как бы описывая, что здесь должно быть за изображение.!}
• 5. width="150" — กำหนดความกว้างของภาพขนาดย่อ ในกรณีนี้ภาพจะลดลงตามสัดส่วนโดยตรงโดยเน้นไปที่ความกว้างที่กำหนด

ค่อนข้างเป็นไปได้ที่เมื่อคุณใส่รหัสนี้ รูปภาพสองรูปจะปรากฏบนหน้าหลักของประกาศแต่ละรายการ ผลลัพธ์ของข้อผิดพลาดนี้อาจต้องใช้เอาต์พุตมาตรฐานของการประกาศ:

และเพื่อให้ข้อผิดพลาดนี้หายไป เพียงแทนที่ด้วย:

หลังจากนี้ปัญหานี้น่าจะหมดไป

สิ่งสุดท้ายที่เราทำได้ในวันนี้คือการทำให้ภาพขนาดย่อของ WordPress เป็นลิงก์ ในการดำเนินการนี้ เพียงล้อมโค้ดด้วยแท็ก พร้อมลิงก์ไปยังบทความ:

" >"src="" alt="(!ภาษา:" width="150" /> !}

เกี่ยวกับการใช้ภาพขนาดย่อของ WordPress ในประกาศบทความก็แค่นั้นแหละ แต่เราอาจจำเป็นต้องออกแบบรูปลักษณ์ของรูปภาพโดยใช้ไฟล์ style.css บางคนอาจมีปัญหาในการตัดสินใจเลือกว่าจะใช้ตัวเลือกใดในการจัดสไตล์