9 WordPress Codes เพื่อเพิ่มรสชาติให้กับบล็อกของคุณและปรับปรุง UX

บทความที่เขียนโดย:
  • WordPress
  • อัปเดตแล้ว: พฤษภาคม 08, 2019

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

แต่การพึ่งพาตัวเลือกเริ่มต้นของ WordPress อาจทำให้คุณเสีย:

  • ฟังก์ชันการทำงานน้อยลง
  • ผู้ใช้เบื่อ (ผู้ที่เห็นสิ่งเดียวกันในทุกเว็บไซต์ WP พวกเขาสะดุดเมื่อ)
  • ลดลงในการจัดอันดับของเครื่องมือค้นหา

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

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

ต้องการความช่วยเหลือ Spice Up Blog WordPress ของคุณหรือไม่?
WHSR เป็นพันธมิตรกับ Codeable.io เพื่อช่วยเหลือผู้ใช้ที่ต้องการพัฒนา WP / บริการปรับแต่งเอง

หากต้องการรับใบเสนอราคาฟรี โปรดกรอกแบบฟอร์มคำขอนี้.

ให้พวกเขาลองและแจ้งให้เราทราบวิธีที่พวกเขาทำงานออกสำหรับคุณ! ;)

รหัส 9 เพื่อเพิ่มประสิทธิภาพ WordPress Blog ของคุณ

ฉันจะเสนอตัวอย่างโค้ดสองประเภทในโพสต์นี้:

  1. โค้ด Codex
  2. ตัวอย่างโค้ดและวิดเจ็ต

โค้ด Codex เป็นตัวอย่าง PHP ที่ฉันเขียนเอง (ด้วยความช่วยเหลือของคู่หมั้นของฉัน Simone) โดยใช้อย่างเคร่งครัด WordPress.org Codex เป็นข้อมูลอ้างอิง

ตัวอย่างโค้ดและวิดเจ็ตเป็นส่วนของรหัส PHP (หรือปลั๊กอิน WordPress) ที่พร้อมใช้งานบนเว็บไซต์อื่น ๆ และใน WordPress.org แต่ฉันยังรวมตัวอย่างของคู่หมั้นของฉันและฉันเขียนตั้งแต่เริ่มต้นโดยใช้ข้อมูลอ้างอิงแบบเปิดและแบบแผน Codex

รหัสทั้งสองประเภทนั้นติดตั้งและใช้งานได้ง่าย แต่คุณอาจต้องการเริ่มต้นด้วยวิดเจ็ตและปลั๊กอินหากคุณไม่แน่ใจว่าจะจัดการกับรหัสอย่างไร

ฉันเข้าใจว่าตัวอย่างโค้ด 9 อาจไม่เพียงพอสำหรับผู้ที่ชอบทดลองใช้โค้ดที่แตกต่างกันมากมายและดังนั้นฉันจึงมั่นใจว่า Robert Ludrosky ของเรา 25 ข้อมูลโค้ดที่มีประโยชน์สำหรับนักพัฒนาซอฟต์แวร์ WordPress จะปรนเปรอความหิวของคุณ (อย่างน้อยชั่วขณะหนึ่ง) ;)

รหัส Codex

1 แยกแยะกระทู้ที่น่าสนใจ

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

<? php is_sticky (); ?>

ฟังก์ชันเพียงอย่างเดียวจะคืนค่า TRUE หรือ FALSE เท่านั้นดังนั้นคุณสามารถทำอะไรได้บ้างที่นี่หากเขียนโครงสร้างเงื่อนไข (if / else) เพื่อจัดการข้อความที่เหนียวของคุณ ตัวอย่าง:

<? php ถ้า is_sticky () {the_title (); the_time ('M, d, Y'); the_excerpt (); } อื่น {รวม 'post-template.php'; }

ในการใช้ตัวอย่างนี้ฉันจะแสดงข้อความที่เหนียวเป็นช่องที่มีเฉพาะชื่อวันที่โพสต์และข้อความที่ตัดตอนมา (ไม่ใช่บทความทั้งหมด) ในขณะที่เทมเพลตมาตรฐานสำหรับโพสต์อื่น ๆ มีอยู่ใน post-template.php

โพสต์แต่ละประเภทจะมีสไตล์ชีท CSS ของตัวเอง แต่เราไม่ได้กำหนดสไตล์ที่นี่ เทมเพลตเท่านั้น

Single.php เป็นแม่แบบเริ่มต้นของคุณสำหรับโพสต์เดียว (คุณจะพบว่ามันรวมอยู่ในทุกธีม WP เริ่มต้น)

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

2 แสดง URL โพสต์

วิธีนี้อาจเป็นการเพิ่มเนื้อหาลงในเทมเพลตของคุณ ถ้าคุณต้องการให้ผู้อ่านได้รับ URI สำหรับแต่ละหน้าเว็บ (หรือโพสต์) เพียงใช้แท็กต่อไปนี้ในไฟล์ single.php, page.php หรือแม้แต่ index.php:

<a href="<?php echo get_page_link();?> "> <? php echo get_page_link (); ?> </a>

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

<? php echo get_post_permalink (); ?>
 <? php echo get_page_link(); >? 

ตัวอย่างเช่นเทมเพลตของเพจสามารถรวม:

<p> ลิงก์: <a href="<?php echo get_page_link();?> "> <? php echo get_page_link (); ?> </a> </ p>

3 เรียกและแสดงหมายเลขรหัสโพสต์

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

<?php the_ID(); ?>

การใช้ตัวอย่าง:

<p class = "meta"> โพสต์โดยชื่อผู้แต่ง รหัสโพสต์คือ <? php the_ID (); ?> </ p>

4 แสดงหมวดหมู่ตามรหัส

ฟังก์ชันมาตรฐานของ WordPress คือ:

<? php get_all_category_ids ()?>

นี่คือตัวอย่างที่ฉันใช้ในบล็อกของฉันเขียนโดยใช้รหัสจาก Codex และ หัวข้อเกี่ยวกับ StackOverflow:

<? php $ category_ids = get_all_category_ids (); foreach ($ category_ids เป็น $ cat_id) {$ cat_name = get_cat_name ($ cat_id); $ category_link = get_category_link ($ cat_id); // เราต้องการลิงค์แมวเพื่อให้ URL ใช้งานได้! echo "<a href=\"{$category_link}\"> {$ cat_id} </a>: {$ cat_name} <br/>"; }?>

…และวิธีแสดงผล:

รหัส WP หมวดหมู่

หมายเหตุ: get_all_category_ids () เป็นฟังก์ชันที่เลิกใช้แล้ว แต่คุณยังสามารถใช้งานได้โดยไม่มีปัญหาเช่นเดียวกับฉันในบล็อก (ภาพหน้าจอด้านบน) อย่างไรก็ตามหากคุณต้องการใช้ฟังก์ชันใหม่สำหรับข้อมูลโค้ดนี้โปรดไปที่ get_terms () ของ Codex

รหัสนี้ทำอะไร?

รหัสได้รับรหัสหมวดหมู่ทั้งหมดและชื่อหมวดหมู่สำหรับแต่ละรหัสจากนั้นจะลิงก์ ID กับลิงก์หมวดหมู่ในขณะที่จะแสดงชื่อหมวดหมู่ตามหลัง ":" - เพราะฉะนั้น ก้อง () การแสดงออก <a href=\"{$category_link}\"> {$ cat_id} </a>: {$ cat_name} <br/>.

5 หน้าผู้ใช้รายละเอียด / ผู้เขียนสำหรับบล็อกของคุณ

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

ดีคุณ สามารถ สร้างหน้า Authors / User ของคุณเองโดยใช้โปรแกรมแก้ไขข้อความเครื่องอัพโหลด FTP และแผงควบคุม WordPress อันเป็นที่รักของคุณ

ก่อนอื่นคุณต้องสร้างสำเนาของไฟล์ page.php ของคุณ เปลี่ยนชื่อสำเนาของคุณเป็นชื่อใด ๆ - ฉันตั้งชื่อผู้ใช้ mine.php

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

เปิดไฟล์ users.php ของคุณ (หรือไฟล์ที่คุณตั้งชื่อไว้) และใช้รหัสต่อไปนี้:

 <? php $ result = count_users (); echo 'มี', $ ผลลัพธ์ ['total_users'], 'ผู้ใช้ทั้งหมด'; foreach ($ result ['avail_roles'] เป็น $ role => $ count) echo ',', $ count, 'คือ', $ role, 's'; echo '.'; ?> 

รหัสนี้ใช้ count_users "การใช้งานเริ่มต้น" ใน Codex คุณสามารถดูตัวอย่างแบบสดของรหัสนี้ได้ที่ http://robocity.in/users/.

หลังจากรหัสนั้นมาเพิ่มบางสิ่งเกี่ยวกับผู้ดูแลบล็อก:

<? php printf (__ ('จำนวนโพสต์ที่เผยแพร่โดยผู้ใช้ "ผู้นำ":% d', 'text-dom-here'), count_user_posts (1)); ?>

ฉันใช้ count_user_posts ทำงานที่นี่ตามรูปแบบการใช้ที่แนะนำโดย Codex

ฟังก์ชั่น get_userdata เป็นการดีที่จะแสดงความสัมพันธ์ระหว่างชื่อผู้ใช้กับชื่อจริงของบุคคลที่ใช้มัน ดูด้านล่าง:

<? php $ user_info = get_userdata (1); $ username = $ user_info-> user_login; $ first_name = $ user_info-> first_name; $ last_name = $ user_info-> last_name; echo "$ first_name $ last_name ลงชื่อเข้าใช้เว็บไซต์ WordPress ด้วยชื่อผู้ใช้ของ $ username"; ?>

ตอนนี้เป็นฟังก์ชันที่น่าสนใจที่สุดที่คุณสามารถใช้ในหน้าผู้เขียน / ผู้ใช้ของคุณได้ - get_users ฟังก์ชั่น:

<? php $ blogusers = get_users ('blog_id = 1 & orderby = ชื่อเล่น & บทบาท = ผู้ดูแลระบบ'); // Array ของวัตถุ WP_User foreach ($ blogusers เป็นผู้ใช้ $) {echo '<span>' esc_html ($ user-> user_login) '-' esc_html ($ user-> user_email) '</ span> <br/>'; }?>

ฟังก์ชั่นนี้จะดึงรายชื่อผู้ใช้ตามพารามิเตอร์บางอย่างที่คุณสามารถกำหนดค่าในรหัส ในตัวอย่างข้างต้น (นำมาจากหน้า Codex และแก้ไขให้พอดีกับหน้าผู้ใช้ของฉันที่ Robocity.in) ฉันต้องการรับรายชื่อผู้ดูแลระบบสำหรับ ID บล็อก 1 (บล็อกปัจจุบัน) เรียงลำดับโดย 'ชื่อเล่น' และสำหรับผู้ใช้แต่ละคน ฉันต้องการที่จะแสดงชื่อผู้ใช้และอีเมลในประโยคประเภท“ ชื่อผู้ใช้ - [email protected]"

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

ตัวอย่างโค้ดและวิดเจ็ต

6 ทางเลือก ... คลังเก็บ!

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

มันจะไม่ช่วยให้ผู้อ่านของคุณจับอายุบล็อกและความลึกของเอกสารได้ง่ายขึ้นหรือไม่ :)

คู่หมั้นของฉันและฉันเขียนตัวอย่างง่ายๆโดยใช้ get_post จาก Codex และเมนูแบบเลื่อนลงง่ายๆสำหรับรายการที่จัดเก็บ เราสร้างฟังก์ชันของเราขึ้นมาเพื่อให้แนวคิดทำงานได้ดีขึ้น

<? ฟังก์ชั่น php formatPostDate ($ postId, $ format = '% F') {$ post = get_post ($ postId); $ output = strftime ($ format, strtotime ($ post-> post_date)); ผลตอบแทน $ เอาท์พุท; } function getLastPostID () {list ($ post) = get_posts (array ('posts_per_page' => 1)); ส่งคืน $ post-> ID; }?> <p> บล็อกนี้มีการโพสต์ตั้งแต่ <? php echo formatPostDate (1, '% B% e,% Y'); ?>. <br/> โพสต์ล่าสุดเผยแพร่เมื่อ <? php echo formatPostDate (getLastPostID (), '% B% e,% Y'); ?>. </p> <p> คุณต้องการเยี่ยมชมไฟล์เก็บถาวรที่เฉพาะเจาะจงหรือไม่ </p> <select name = "ไฟล์เก็บถาวรแบบเลื่อนลง" onchange = "document.location.href = this.options [this.selectedIndex] value; "> <option value =" "> <? php echo esc_attr (__ ('เลือกที่เก็บถาวร')); ?> </option> <? php wp_get_archives (อาร์เรย์ ('ประเภท' => 'รายเดือน', 'รูปแบบ' => 'ตัวเลือก', 'show_post_count' => 1)); ?> </select>

รหัสนี้ทำอะไร?

ฟังก์ชั่น formatPostDate ใช้รูปแบบ ID และวันที่ของโพสต์และส่งคืนวันที่ในรูปแบบที่คุณเลือก ฟังก์ชันที่สองคือ getLastPostID รับอาร์เรย์โพสต์ที่มีเพียงหนึ่งโพสต์และส่งคืน ID

ในการรับโพสต์แรกของบล็อก - โดยทั่วไปจะมี ID = 1 เราเขียนรูปแบบ echo โพสต์วันที่ (1, '% B% e,% Y') ในย่อหน้าแรก: รหัสนี้ใช้ฟังก์ชั่น formatPostDate และรับพารามิเตอร์โพสต์ #1 และรูปแบบภาษาอังกฤษมาตรฐานสำหรับวันที่และส่งคืนวันที่

ในการรับโพสต์ล่าสุดของบล็อกเราใช้ formatPostDate (getLastPostID (), '% B% e,% Y') เพื่อรับ ID ของโพสต์ล่าสุดและรูปแบบวันที่ (อีกครั้งเป็นภาษาอังกฤษ) และพิมพ์วันที่ จอภาพ

7 ตรวจสอบว่าผู้เข้าชมใช้โทรศัพท์มือถือหรือไม่

Muneeb ที่ WP-Snippets.com แบ่งปันข้อมูลโค้ดที่น่าสนใจ (ฟังก์ชันหนึ่ง ๆ ) เพื่อตรวจสอบว่าผู้เข้าชมไซต์ของคุณใช้อุปกรณ์เคลื่อนที่หรือไม่

รหัสนี้พร้อมใช้งาน ได้ที่นี่.

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

8 ใช้โครงสร้าง if / else เพื่อจัดการกับเนื้อหาแถบด้านข้างของหน้า

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

สมมติว่าคุณต้องการใช้แถบด้านข้างหลายไซต์ของคุณ คุณสามารถกรอกแถบด้านข้างของคุณด้วย div และส่วนต่างๆได้ แต่ยิ่งไฟล์มีขนาดใหญ่ขึ้น (แม้ว่าคุณจะใช้วิดเจ็ตก็ตาม) ก็จะยิ่งหนักมากขึ้นเท่านั้น

Codex มาพร้อมกับคุณด้วย get_sidebar (ชื่อ $) ฟังก์ชัน การใช้งานง่าย:

  1. สร้าง (พูด) แถบด้านข้างสำหรับตัวอย่างข้อมูล Quotes ของคุณ ตั้งชื่อว่า sidebar-quotes.php
  2. ในไฟล์ sidebar.php หลัก (หรือส่วนหัวหรือไฟล์ดัชนีตามโครงสร้างธีม WP ของคุณ) เขียน get_sidebar ("quotes"); เพื่อรวมไฟล์ "sidebar-quotes.php"

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

คุณอาจไม่ทราบเรื่องนี้ แต่เมื่อคุณใช้รหัส get_sidebar () ทั่วไปนั่นจะรวม“ sidebar.php” เพราะคุณไม่ได้เพิ่มอาร์กิวเมนต์ $ name นี่คือการใช้งานเริ่มต้น เมื่อคุณเพิ่ม“ -name” หลังจาก“ sidebar * .php” คุณสามารถเรียกชื่อ addon นั้นด้วย $ name arg

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

9 เครื่องมือสำหรับการรวบรวมข้อมูลโค้ดลงในไซต์ WordPress ของคุณ

ภาพโค้ดวิดีโอ

ตัวอย่างโค้ด เป็นปลั๊กอิน WordPress ฟรีที่สร้างขึ้นโดย Shea Bange ที่ช่วยให้คุณสามารถเพิ่มข้อมูลโค้ดลงในบล็อกของคุณได้อย่างง่ายดาย

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

Tom Ewer ที่ WPMUDev.org เขียนคำแนะนำที่น่าสนใจเกี่ยวกับปลั๊กอินนี้ แต่เป็นแหล่งข้อมูลที่มีประโยชน์มากที่สุดที่ฉันพบจนถึงตอนนี้สำหรับตัวอย่างโค้ด ฟอรัมสนับสนุนปลั๊กอินที่ WordPress.org.

ไปยังคุณ!

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

เกี่ยวกับ Luana Spinetti

Luana Spinetti เป็นนักเขียนอิสระและศิลปินจากอิตาลีและเป็นนักศึกษาสาขาวิทยาการคอมพิวเตอร์ เธอมีประกาศนียบัตรระดับสูงด้านจิตวิทยาและการศึกษาและได้เข้าเรียนหลักสูตรศิลปะหนังสือการ์ตูนเรื่อง 3 ปีซึ่งเธอจบการศึกษาจาก 2008 ในฐานะที่เธอเป็นแบบหลายเหลี่ยมเพชรพลอยเธอจึงมีความสนใจในด้าน SEO / SEM และ Web Marketing โดยเฉพาะอย่างยิ่งกับ Social Media และเธอได้ทำงานในนวนิยายสามเล่มในภาษาแม่ของเธอซึ่งเธอหวังจะ indie เผยแพร่เร็ว ๆ นี้