คำแนะนำในการใส่สไตล์ปลั๊กอิน WordPress WP-PageNavi

หากคุณไม่คุ้นเคยกับ WP-PageNavi ปลั๊กอิน WordPress ช่วยให้คุณสามารถแทนที่การนำทางก่อนหน้า / ถัดไปตามปกติด้วยการนำทางเพจที่มีลำดับขั้นสูงขึ้น นี่คือคุณลักษณะที่ฉันได้รวมไว้ในธีมจำนวนหนึ่งที่ฉันได้พัฒนาขึ้นรวมถึง RS16, Blogwave, RS17, และ จุดสว่าง.


RS16 PageNavi

ในบทช่วยสอนนี้ฉันจะอธิบายเกี่ยวกับวิธี:

  • ติดตั้ง WP-PageNavi และรวมเข้ากับธีมของคุณอย่างถูกต้อง.
  • สองวิธีในการปิดใช้งานและ / หรือแทนที่รูปแบบปลั๊กอินเริ่มต้น.
  • ภาพรวมของเอาต์พุตมาร์กอัพ HTML โดย WP-PageNavi
  • ในที่สุดวิธีการเปลี่ยนรูปลักษณ์ของการนำทางหน้าของคุณผ่าน CSS

ติดตั้งปลั๊กอิน

คุณมีสองตัวเลือกในการติดตั้งปลั๊กอิน WP-PageNavi.

  • ดาวน์โหลดจาก WordPress.org, อัปโหลดไปยังไดเรกทอรี / wp-content / plugins / และเปิดใช้งาน (aka, วิธีที่ล้าสมัย).
  • คุณสามารถติดตั้งปลั๊กอินโดยอัตโนมัติโดยค้นหาในหน้า“ เพิ่มใหม่” ใต้ปลั๊กอินในแผงควบคุม WordPress ของคุณ เพียงค้นหา“ pagenavi” และคุณควรค้นหา.

โอเคนั่นควรจะค่อนข้างง่าย ตอนนี้ถึงเวลาที่จะทำให้มือของคุณสกปรกในโค้ดสำหรับส่วนการรวม.

การรวมธีม

ในการรวมธีมของเราเราไม่ต้องการให้มีข้อผิดพลาดใด ๆ ปรากฏขึ้นหาก WP-PageNavi ไม่ทำงาน แต่เราจะตรวจสอบให้แน่ใจว่ากลับไปใช้การนำทางก่อนหน้า / ถัดไปแบบเก่าแทน ในการทำเช่นนี้เราจะใช้ function_exists การตรวจสอบตามเงื่อนไข.

สมมติว่านี่เป็นรหัสนำทาง WordPress รุ่นก่อนหน้า / ถัดไปของคุณ:

<?php next_posts_link (‘«รายการที่เก่ากว่า’) ?>
<?php previous_posts_link (‘รายการที่ใหม่กว่า»’) ?>

เราจะเปลี่ยนเป็นดังต่อไปนี้:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } อื่น { ?>
<?php next_posts_link (‘«รายการที่เก่ากว่า’) ?>
<?php previous_posts_link (‘รายการที่ใหม่กว่า»’) ?>
<?php} ?>

นี่เป็นการตรวจสอบโดยทั่วไปเพื่อดูว่า WP-PageNavi ทำงานอยู่หรือไม่และจะแสดงรหัสการนำทางหน้าใหม่หรือไม่ หากไม่เป็นเช่นนั้นระบบจะกลับสู่การนำทางก่อนหน้า / ถัดไปตามปกติอย่างเรียบร้อย.

โปรดทราบ: คุณอาจต้องการวาง wp_pagenavi () ทั้งนี้ขึ้นอยู่กับวิธีการเข้ารหัสของ CSS ส่วนหนึ่งภายในส่วน “การนำทาง” (หรือเทียบเท่า) โปรดจำไว้ว่า WP-PageNavi จะแยกคลาสใหม่ที่เรียกว่า “wp-pagenavi” ออกมาแม้ว่าเราจะใช้สไตล์นั้นแยกกัน.

แทนที่ลักษณะปลั๊กอิน

ตามค่าเริ่มต้น WP-PageNavi จะแทรกไฟล์ CSS ที่ชื่อ pagenavi-css.css โดยอัตโนมัติจากไดเรกทอรีปลั๊กอินลงในส่วนหัวของไซต์ของคุณ เราไม่ต้องการให้รูปแบบเริ่มต้นเหล่านี้รบกวนรูปแบบที่กำหนดเองที่ทำเองของเราดังนั้นเราจะกำจัดพวกเขาอย่างสมบูรณ์และมีสองวิธีง่ายๆในการทำเช่นนั้น.

  • เพิ่มไฟล์ CSS ในไดเร็กทอรีธีมของคุณ – นี่อาจเป็นวิธีที่ง่ายที่สุดในการแทนที่สไตล์ WP-PageNavi ที่เป็นค่าเริ่มต้น หากคุณมีไฟล์ชื่อ pagenavi-css.css ในไดเรกทอรีธีมของคุณ WP-PageNavi จะใช้สิ่งนี้แทนไฟล์เริ่มต้นในไดเรกทอรีปลั๊กอิน.
  • เพิ่มตัวอย่างในไฟล์ functions.php ของคุณ – ตัวอย่างโค้ดต่อไปนี้ที่ฉันเลือกมา สูตรอาหาร WP จะปิดการใช้งานพฤติกรรมดังกล่าวอย่างสมบูรณ์และไม่รวมสไตล์ชีทใด ๆ จากปลั๊กอิน (ไม่ว่าจะเป็นค่าเริ่มต้นหรือการแทนที่ในไดเรกทอรีธีมของคุณ).

add_action (‘wp_print_styles’, ‘my_deregister_styles’, 100);

ฟังก์ชั่น my_deregister_styles () {
wp_deregister_style (‘wp-pagenavi’);
}

เพียงแค่ใส่รหัสนั้นลงในไฟล์ functions.php ของชุดรูปแบบและเพิ่มสไตล์ CSS เข้ากับสไตล์ชีทของธีมปกติ (โดยปกติคือ style.css).

บันทึก: ตรวจสอบให้แน่ใจว่ารหัสนั้นล้อมรอบด้วยเครื่องหมายวงเล็บเช่น <?PHP … ?> ถ้าไฟล์ฟังก์ชั่นของคุณว่างเปล่า.

WP-PageNavi HTML Markup และ CSS Selectors

นี่คือลักษณะของมาร์กอัป WP-PageNavi ในตัวอย่างต่อไปนี้มีสี่หน้าในปัจจุบันในหน้าสอง.

ก่อน1
2
3
ต่อไป

ล่าสุด “

เราสามารถใช้ตัวเลือก CSS ต่อไปนี้เพื่อกำหนดเป้าหมายมาร์กอัป HTML ข้างต้น:

  • .wp-pagenavi – ใช้กับ div ทั้งหมดมีประโยชน์สำหรับการล้าง CSS, การเติม / ระยะขอบ, ขนาดตัวอักษรและสไตล์ (ตัวหนา, ตัวเอียง, ฯลฯ )
  • .wp-pagenavi a – กำหนดเป้าหมายลิงก์ทั้งหมดภายในการนำทางหน้ารวมถึงหมายเลขหน้าและก่อนหน้า / ถัดไป.
  • .wp-pagenavi a.page – กำหนดเป้าหมายหมายเลขหน้าโดยเฉพาะ
  • .wp-pagenavi a.first – กำหนดเป้าหมายลิงก์“ แรก” โดยเฉพาะ (ไม่อยู่ในรายการด้านบน)
  • .wp-pagenavi a.last – กำหนดเป้าหมายลิงก์“ ล่าสุด” โดยเฉพาะ
  • .wp-pagenavi span – กำหนดเป้าหมายไปยังหมายเลขหน้าปัจจุบันพร้อมกับส่วนขยาย (สิ่งที่มีสามจุด)
  • .wp-pagenavi span.current – กำหนดเป้าหมายหมายเลขหน้าปัจจุบันโดยเฉพาะ
  • .wp-pagenavi span.extend – กำหนดเป้าหมายส่วนขยายโดยเฉพาะ (จุดสามจุด)
  • .wp-pagenavi span.pages – การแสดงหมายเลขหน้าเป้าหมายโดยเฉพาะ (เช่นหน้า 1 จาก 4)

บันทึก: ลิงค์ก่อนหน้าและถัดไปเป็นค่าเริ่มต้นไม่มีคลาส CSS หากคุณต้องการให้พวกเขาแตกต่างอย่างสมบูรณ์จากหมายเลขหน้าและลิงค์แรก / สุดท้ายลิงก์เหล่านั้นจะต้องรีเซ็ตสไตล์ที่เพิ่มให้กับตัวเลือก. wp-pagenavi ถ้ามันไม่สมเหตุสมผลลองดูตัวอย่างต่อไปนี้ (เรียบง่ายจริง ๆ ).

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

.wp-pagenavi a {font-weight: ตัวหนา; } / * ลิงค์ก่อนหน้าและถัดไปเท่านั้น * /
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last {font-weight: Normal; } / * ลิงค์อื่น ๆ * /

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

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

การอัปเดตที่สำคัญ: ขอขอบคุณการอัปเดตจาก scribu ในความคิดเห็นปรากฎว่า WP-PageNavi เวอร์ชั่นใหม่ล่าสุดมีคลาสก่อนหน้า / ถัดไปสำหรับพวกเขา (ขอบคุณในส่วนของ Yoast).

คุณสามารถใช้. wp-pagenavi a.previouspostslink และ. wp-pagenavi a.nextpostslink เพื่อเลือกลิงก์ก่อนหน้าและถัดไปตามลำดับ.

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

ตัวอย่าง CSS

นี่คือตัวอย่างของการออกแบบ PageNavi ที่ฉันสร้างขึ้นจาก Blogwave กระทู้.

BlogWave อัพเดต PageNavi

นี่คือรหัสที่ฉันใช้เพื่อให้ได้ลักษณะนี้, CSS หลายบรรทัด เป็นทางเลือก:

.wp-pagenavi a, .wp-pagenavi span {
การขยาย: 5px; ระยะขอบขวา: 10px;
ขนาดตัวอักษร: 15px; สี: # 03719c การตกแต่งข้อความ: ไม่มี;
เส้นขอบ: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; รัศมีเส้นขอบ: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
พื้นหลัง: # 03719c;
สี: #fff;
เส้นขอบ: 3px solid #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

และนี่คือความหมายทั้งหมด:

กฎข้อแรก
.wp-pagenavi a, .wp-pagenavi span เลือกองค์ประกอบสมอและช่วงขยาย (ทุกอย่างสวยมาก) ภายใน. wp-pagenavi div.

  • บรรทัดแรกของกฎตั้ง padding ที่ 5px ดังนั้นจะไม่ถูกบีบอัดให้ชิดกับขอบสีเทาอ่อน (กำหนดไว้ด้านล่าง) นอกจากนี้ยังตั้งระยะขอบที่สอดคล้องกันของ 10px ทางด้านขวาของแต่ละองค์ประกอบเพื่อให้มีระยะห่างเท่ากันระหว่างแต่ละองค์ประกอบ.
  • บรรทัดที่สองกำหนดขนาดตัวอักษร 15px ทำให้สีข้อความเป็นสีน้ำเงินและทำให้แน่ใจว่าลิงก์ไม่มีขีดเส้นใต้.
  • บรรทัดที่สามกำหนดเส้นขอบสีเทาทึบขนาด 3px ให้กับทุกสิ่ง รหัสเส้นขอบรัศมีทำให้มุมโค้งมน.

กฎข้อที่สอง
.wp-pagenavi a: hover, .wp-pagenavi span.current เลือกเอฟเฟกต์โฮเวอร์ลิงก์เช่นเดียวกับหมายเลขหน้าปัจจุบันตามลำดับ.

  • บรรทัดแรกตั้งค่าสีพื้นหลังสีน้ำเงินเข้ม.
  • บรรทัดที่สองทำให้ข้อความเป็นสีขาว.
  • บรรทัดที่สามให้ขอบสีเข้มขึ้นเล็กน้อย.

กฎข้อที่สาม
สิ่งนี้จะเลือกหมายเลขหน้าปัจจุบัน (อีกครั้ง) โดยไม่กระทบกับเอฟเฟกต์โฮเวอร์ลิงก์เช่นกัน (เช่นกฎที่สอง) นี่ทำให้หมายเลขหน้าปัจจุบันเป็นแบบอักษรหนา.

เหตุผลที่ฉันไม่ได้รวมไว้กับเอฟเฟกต์โฮเวอร์ลิงก์เนื่องจากมีผลกระทบที่ไม่สม่ำเสมอจากน้ำหนักตัวอักษรปกติถึงหนา.

บันทึก: คุณอาจต้องใช้ตัวเลือกที่เฉพาะเจาะจงมากขึ้นทั้งนี้ขึ้นอยู่กับวิธีเข้ารหัสรหัส CSS ของคุณ ตัวอย่างเช่นหากมี #content และ a สไตล์สำหรับ WP-PageNavi ของคุณอยู่ใน div ของเนื้อหาคุณอาจต้องเขียน PageNavi CSS ของคุณใหม่เป็น #content .wp-pagenavi a และแทนที่ลักษณะเฉพาะที่ไม่เจาะจงอื่น ๆ.

ข้อสรุป

ฉันรู้ว่านี่เป็นตัวอย่างที่ค่อนข้างง่ายคุณสามารถมีกฎ CSS ขั้นสูงมากขึ้นเพื่อแยกแยะลิงก์ต่างๆและองค์ประกอบอื่น ๆ ได้มากขึ้น หวังว่าคุณจะได้รับเคล็ดลับ CSS เล็ก ๆ น้อย ๆ ไปพร้อมกัน.

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

หวังว่าคุณทุกคนชอบการกวดวิชาและหากคุณมีคำขอใด ๆ สำหรับบทเรียน WordPress หรือเคล็ดลับ CSS ในอนาคตโปรดแจ้งให้เราทราบในความคิดเห็น.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map