เพิ่ม Widgetized Footer ให้กับธีม WordPress ของคุณ

แรงบันดาลใจสำหรับการสอนนี้มาจาก ทวีตที่ฉันได้รับ พร้อมข้อเสนอแนะสำหรับการเปิดตัวเร็ว ๆ นี้ ธีม RS12.


การตอบสนอง twitter zakmorris

แม้ว่าท้ายที่สุด widgetized ไม่ได้ทำให้มันในการเปิดตัวของชุดรูปแบบ RS12 ฉันตัดสินใจที่จะเขียนบทช่วยสอนนี้เพื่อแสดงให้คนเห็นวิธีการเพิ่มส่วนท้าย widgetized ในชุดรูปแบบของคุณ ในคู่มือนี้คุณจะได้เรียนรู้:

  • รหัส HTML และ CSS ที่จำเป็นในการสร้างส่วนท้าย widgetized
  • วิธีเพิ่มแท็กแม่แบบ WordPress ที่ใช้กันทั่วไปเป็นตัวยึดตำแหน่ง
  • วิธีวิดเจ็ตส่วนท้ายและวางวิดเจ็ตภายใน

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

ฉันจะใช้ กรีนรังสี ธีม WordPress เป็นตัวอย่างของฉันในการกวดวิชานี้ ในขณะนี้ส่วนท้ายมีเพียงข้อความ “ลิขสิทธิ์” และเครดิตมาตรฐาน.

HTML

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

โพสต์ล่าสุด

คลังเก็บรายเดือน

จดหมายเหตุรายวัน

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

Green Footer 1

CSS

อย่างที่คุณเห็นนี่มันดูไม่ดีเลยหากไม่มีสไตล์ CSS เพิ่มรหัสต่อไปนี้ลงในสไตล์ชีทของคุณ.

.ส่วนท้ายของรายการ {
ลอย: ซ้าย;
ความกว้าง: 33%;
padding-bottom: 10px;
}
.ส่วนท้ายของรายการ ul {
padding-left: 15px;
}

สิ่งที่รหัสนี้ทำคือการลอยรายการส่วนท้ายแต่ละรายการไปทางซ้ายซึ่งโดยทั่วไปหมายความว่าพวกเขาสามารถเคียงข้างกัน ความกว้างถูกตั้งไว้ที่ 33% ซึ่งให้พื้นที่เพียงพอสำหรับรายการส่วนท้ายสามรายการในแถวเดียว นอกจากนี้ยังมีการเติมเล็กน้อยเพิ่มด้านล่างรายการส่วนท้ายแต่ละรายการ ส่วนที่สองเป็นเพียงการขยายรายการ 15 พิกเซลทางด้านซ้าย.

ตอนนี้คุณสามารถเห็น HTML และ CSS เริ่มมารวมกันแล้ว นี่คือสิ่งที่คุณควรมี:

Green Rays Footer 2

รหัส WordPress

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

โพสต์ล่าสุด

    <?php wp_get_archives (‘type = postbypost&ขีด จำกัด = 4’ ); ?>

คลังเก็บรายเดือน

    <?php wp_get_archives (‘จำกัด = 4’); ?>

จดหมายเหตุรายวัน

    <?php wp_get_archives (‘type = รายวัน&ขีด จำกัด = 4’ ); ?>

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

คำนวณมัน

สำหรับบทแนะนำบทนี้ฉันจะยืมบางส่วนจากหน้าที่แล้ว ธีมวิดเจ็ต เกี่ยวกับการสอน.

ขั้นตอนแรกคือการลงทะเบียน“ แถบด้านข้าง” หากต้องการทำสิ่งนี้เพียงแค่แทนที่เนื้อหาปัจจุบันของไฟล์ functions.php ด้วยสิ่งต่อไปนี้:

<?PHP
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘Sidebar’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (array (
‘name’ => ‘ส่วนท้าย’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));
?>

ตอนนี้เราจะเข้าสู่ sidebar.php และแทนที่แท็กที่มีเงื่อนไขของแถบด้านข้างแบบไดนามิกในปัจจุบันด้วย:

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ()): ?>

ด้วยสิ่งนี้:

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("แถบด้านข้าง")): ?>

ตอนนี้เราจะเข้าไปที่ไฟล์ footer.php ของเราแล้วใส่ส่วนท้ายของรายการลงในแท็กตามเงื่อนไขของแถบด้านข้าง ก่อน div“ sidebar-item” อันแรกให้เพิ่มรายการต่อไปนี้.

<?php if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ("ฟุตบอล")): ?>

ทันทีหลังจาก div“ ส่วนท้ายรายการ” ปิดท้าย (และเหนือ div “ชัดเจน” ที่เราเพิ่มไว้ก่อนหน้านี้) เราจะเพิ่มรายการต่อไปนี้:

<?php endif; ?>

ตกลงตอนนี้แถบด้านข้างและส่วนท้ายของเราควรจะมีวิดเจ็ต ลองทดสอบโดยเพิ่มวิดเจ็ตบางส่วนในท้ายกระดาษ ฉันจะเพิ่มวิดเจ็ต Blogroll วิดเจ็ตความคิดเห็นล่าสุดและวิดเจ็ตข้อความ นี่คือสิ่งที่ควรมีลักษณะ:

Green Footer 3

ข้อสรุป

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

หากใครก็ตามต้องการธีม Green Rays ที่อัปเดตไม่ว่าโอกาสใดคุณสามารถดาวน์โหลดได้ ที่นี่. ด้วยวิธีนี้คุณสามารถดูว่าฉันเพิ่มรหัสตรงไหน คุณสามารถเปรียบเทียบกับ ชุดรูปแบบดั้งเดิม เช่นกัน.

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

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