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

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


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

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

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

ไม่ว่าคุณจะเลือกตัวเลือกใด คำแนะนำด้านล่างนี้จะช่วยให้คุณบรรลุเป้าหมาย

วิธีเพิ่มเมนูในธีม WordPress ของคุณ:

  1. สร้างธีมเด็ก
  2. สร้างสรรค์เมนูใหม่ๆ
  3. เพิ่มตำแหน่งเมนูให้กับธีมของคุณ
  4. จัดรูปแบบเมนูนำทางของคุณ

การทำความสะอาดเบื้องต้น

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

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

สร้างธีมเด็ก

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

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

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

คุณสามารถตรวจสอบบทความเหล่านี้สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีสร้างการติดตั้ง WordPress ในเครื่อง:

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

ในการเพิ่มตัวเลือกตำแหน่งเมนูที่เลือกได้ในหน้าแดชบอร์ดผู้ดูแลระบบของคุณภายใต้ ลักษณะ> เมนู คุณต้องทำสิ่งที่เรียกว่า "การบันทึกเมนู" เพียงเพิ่มข้อมูลโค้ดลงใน your fonctions.php ไฟล์ที่อยู่ใน wp-content > ธีม > ธีมของคุณ.

ใน cPanel ให้คลิกที่ จัดการไฟล์ ไอคอนใน ไฟล์ ส่วนในหน้าแรก หากคุณยังไม่ได้กำหนด .ของคุณ จัดการไฟล์ หากต้องการโหลดที่รูทเอกสารของไซต์ ให้นำทางไปที่นั่นตอนนี้

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

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

มี a fonctions.php ไฟล์ในของคุณ /wp-รวม/ โฟลเดอร์ แต่ไม่ใช่โฟลเดอร์ที่คุณต้องการแก้ไข อย่าลืมหา fonctions.php ไฟล์ที่อยู่ในธีมที่คุณใช้ มิฉะนั้น คุณจะพบข้อผิดพลาดในการพยายามเพิ่มรหัสที่พบในภายหลัง

ค้นหา .ของคุณ fonctions.php ไฟล์และคลิกที่มันหนึ่งครั้งแล้วตามด้วยคลิกที่ เอดิเทอร์ ปุ่มที่ด้านบนของหน้า

ตัวจัดการไฟล์ใน cPanel เลือกไฟล์ functions.php แล้ว
คุณสามารถเปลี่ยนธีมของคุณ fonctions.php ไฟล์โดยตรงใน cPanel

หากหน้าต่างป๊อปอัปเปิดขึ้น ให้คลิกที่ เอดิเทอร์ ปุ่มขวาล่าง คุณอาจไม่เห็นหากคุณปิดการใช้งานก่อนหน้านี้

เลื่อนลงมาที่ไฟล์ หากคุณต้องการเพิ่มเพียงเมนูเดียว ให้เพิ่มรหัสต่อไปนี้ในบรรทัดใหม่:

function register_my_menu() {
register_nav_menu('new-menu',__( 'New Menu' ));
}
add_action( 'init', 'register_my_menu' );

ในตัวอย่างนี้ New Menu เป็นชื่อที่จะปรากฏในหน้าเมนูแดชบอร์ดของผู้ดูแลระบบเพื่อให้เข้าใจได้ในสายตามนุษย์ ที่ new-menu ชื่อคือสิ่งที่ WordPress เข้าใจในการรันโค้ดของคุณอย่างถูกต้อง

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

หากคุณต้องการเพิ่มหลายเมนูในไซต์ของคุณ ให้เพิ่มโค้ดนี้ในบรรทัดใหม่แทน:

function register_my_menus() {
  register_nav_menus(
    array(
      'new-menu' => __( 'New Menu' ),
      'another-menu' => __( 'Another Menu' ),
      'an-extra-menu' => __( 'An Extra Menu' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

คุณสามารถเพิ่มเมนูใหม่ได้มากเท่าที่ต้องการด้วยวิธีนี้ กฎเดียวกันจะใช้สำหรับการตั้งชื่อ

บันทึกการเปลี่ยนแปลงที่ทำกับไฟล์ สิ่งที่เหลืออยู่คือการเพิ่มเมนูใหม่ลงในไซต์ของคุณ

คุณต้องการขายผลิตภัณฑ์ของคุณบนอินเทอร์เน็ตหรือไม่?

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

นี่คือที่ที่คุณต้องตัดสินใจว่าต้องการวางเมนูของคุณไว้ที่ใด หากคุณต้องการให้เมนูของคุณปรากฏที่ด้านบนของหน้า คุณจะต้องเปลี่ยน header.php ไฟล์. คุณยังสามารถใส่ไว้ในส่วนท้ายของคุณ ซึ่งหมายความว่าคุณจะแก้ไข footer.php หย่อนลงไปทิ้งลงไป.

คุณยังสามารถแสดงเมนูบนหน้าโดยแก้ไขไฟล์เทมเพลตหรือบนแถบด้านข้างโดยแก้ไข sidebar.php หย่อนลงไปทิ้งลงไป.

คุณสามารถวางเมนูใหม่ได้ทุกที่ที่คุณต้องการ นี่คือจำนวนโค้ดขั้นต่ำที่คุณควรเพิ่มในสถานที่เหล่านี้:

<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>

แค่เปลี่ยน new-menu ด้วยชื่อที่อ่านได้ของ WordPress ที่คุณเลือก คุณอาจต้องการจัดรูปแบบเมนูของคุณด้วย CSS เพื่อให้เป็นมากกว่าฟังก์ชันพื้นฐานและยังดูดีอีกด้วย ในการดำเนินการนี้ คุณจะต้องสร้างชั้นเรียนและเพิ่มลงในธีมของคุณด้วยโค้ดต่อไปนี้

<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>

เหมือนเดิม เปลี่ยน new-menu ด้วยชื่อที่คุณเลือก ในตัวอย่างนี้ ฉันตั้งชื่อคลาสที่ฉันสร้างขึ้น new_menu_class. คุณเปลี่ยนแปลงได้ แต่อย่าลืมอัปเดตโค้ดนี้เพื่อให้สอดคล้องกับการปรับเปลี่ยน

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

ส่วนการตั้งค่าของเมนู
รายการเมนูใหม่ที่บันทึกไว้ซึ่งแสดงอยู่ในการตั้งค่าเมนู

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

หากต้องการให้ลิงก์ปรากฏในตำแหน่งเมนูใหม่ของคุณ ให้คลิก สร้างเมนูใหม่ ที่ด้านบนของหน้า

หน้าเมนูในแดชบอร์ดผู้ดูแลระบบ
คุณสามารถคลิกที่ สร้างเมนูใหม่ ลิงก์หรือป้อนชื่อใหม่สำหรับเมนูของคุณ

หากคุณยังไม่มีเมนู คุณสามารถป้อนชื่อสำหรับเมนูของคุณในช่องหน้า แล้วคลิก สร้างเมนู. หากคุณมีเมนูที่สร้างไว้ก่อนหน้านี้แล้ว คุณสามารถคลิกที่ สร้างเมนูใหม่ ลิงค์ไปด้านบนของหน้า

เมื่อคุณสร้างเมนูใหม่แล้ว คุณยังสามารถจัดการสถานที่ที่จะแสดงภายใต้แท็บ "จัดการสถานที่"

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

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

ข้อสังเกตบางประการที่คุณอาจพบว่ามีประโยชน์เช่น ShiftNav, WP Responsive Menu และ Max Mega Menu

ทรัพยากรที่จะไปต่อ

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

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบธีมใหม่ของคุณ มีแหล่งข้อมูลมากมายที่คุณสามารถดูได้ และคุณสามารถค้นหาได้ในบทความ A Mega Guide to Learning CSS และ SEO สำหรับ WordPress: 150+ แหล่งข้อมูล

คุณยังสามารถอ่านบทความอื่น ๆ ของเราได้ 10 เคล็ดลับง่ายๆ สำหรับการเรียนรู้ CSS สำหรับ WordPress, 25 เคล็ดลับจากผู้เชี่ยวชาญในการเข้ารหัส CSS สำหรับ WordPress, 25 เคล็ดลับสำหรับมือโปรสำหรับการปรับปรุงเวิร์กโฟลว์ CSS ของคุณ และ 5 ปลั๊กอิน CSS ฟรีสำหรับ WordPress ไซต์สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการเข้ารหัส CSS สำหรับธีมของคุณ
คำสำคัญ:

0 หุ้น
หุ้น
ทวีต
Enregistrer