สร้างวิดเจ็ต Twitter แบบกำหนดเองโดยไม่มีปลั๊กอิน

ฉันถูกถามสองสามครั้งเกี่ยวกับปลั๊กอิน WordPress ที่ฉันใช้เพื่อสร้างรายการ“ ฟีด Twitter” ในส่วนท้ายของไซต์ของฉัน จริง ๆ แล้วฉันไม่ได้ใช้ปลั๊กอินเลยมันเป็นตัวอย่างของ Javascript จาก Twitter ที่แสดงรายการทวีตล่าสุดของฉันที่ฉันใช้ CSS ในบทช่วยสอนนี้ฉันจะแสดง:


  • รหัส HTML และ Javascript ที่จำเป็นเพื่อดึงทวีตล่าสุด
  • ภาพรวมของมาร์กอัป HTML และตัวเลือก CSS ที่เกี่ยวข้อง
  • ตัวอย่างสองชิ้นของวิดเจ็ต Twitter สไตล์ที่กำหนดเองที่ฉันใช้เอง

อ่านต่อไปเพื่อดูบทแนะนำที่เหลือ …

HTML และ Javascript

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

ขั้นแรกให้วางรหัสต่อไปนี้ในตำแหน่งที่คุณต้องการให้รายการแสดง:

  • กำลังโหลดฟีด Twitter

บันทึก:

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

    ประการที่สองคุณจะต้องวาง Javascript ในบรรทัดต่อไปนี้ ใกล้เคียงกับแท็กมากที่สุด.

    ขณะนี้ฉันมีสิทธิ์เหนือรหัส Google Analytics ของฉัน คุณควรรักษา Javascript บรรทัดเหล่านี้ให้น้อยที่สุดเท่าที่จะทำได้บนหน้าเว็บเพราะในกรณีที่ Twitter ไม่โหลดทุกอย่างที่อยู่ด้านล่างโค้ดนั้นจะหยุดทำงาน (ซึ่งไม่ใช่เรื่องใหญ่หากอยู่ด้านล่าง).

    ภาพรวมของ HTML Markup และ CSS Selectors

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

    • #twitter_update_list – เลือกรายการทั้งหมด
    • #twitter_update_list li – เลือกรายการแต่ละรายการ
    • #twitter_update_list li span – เลือกส่วน“ tweet” ของรายการไม่ใช่ลิงค์ที่ผ่านมา
    • #twitter_update_list li span a – เลือกลิงค์ภายในส่วน“ ทวีต” ของรายการ
    • #twitter_update_list a [style ="ขนาดตัวอักษร: 85%;"] – เลือกลิงค์“ เวลาที่ผ่านมา” ในลักษณะที่ค่อนข้างแฮ็ค (ดูหมายเหตุด้านล่าง).

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

    #twitter_update_list a [style ="ขนาดตัวอักษร: 85%;"] {ขนาดตัวอักษร: 1em! สำคัญ; }

    ที่อาจไม่ทำงานใน IE เวอร์ชันแรกเนื่องจากส่วน “! สำคัญ” คุณยังสามารถใช้ display: block; เพื่อย้ายลิงก์ไปยังบรรทัดถัดไป.

    ตัวอย่างสด

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

    Theme Lab Twitter Feed

    นี่คือรหัสที่ฉันใช้สำหรับรายการ:

    #twitter_update_list {
    ขนาดตัวอักษร: 13px;
    line-height: 21px;
    รายการสไตล์: ไม่มี;
    }
    #twitter_update_list li {
    พื้นหลัง: url (‘images / twitter-divider.gif’) ด้านล่างซ้ายทำซ้ำ -x;
    padding-bottom: 7px;
    ระยะขอบล่าง: 9px;
    }
    #twitter_update_list span, #twitter_update_list ขยาย {
    สี: #ababab;
    การตกแต่งข้อความ: ไม่มี;
    }
    #twitter_update_list a {
    สี: # 6f7276;
    }

    • บรรทัดแรกเลือกรายการทั้งหมด มันตั้งค่าขนาดตัวอักษรความสูงของบรรทัดและทำให้แน่ใจว่าไม่มีสัญลักษณ์แสดงหัวข้อย่อยปรากฏขึ้น.
    • บรรทัดที่สองทำให้รูปภาพขนาดเล็ก 2 × 1 ซ้ำด้านล่างแต่ละรายการในรูปแบบของตัวแบ่ง การเว้นช่องว่างกำหนดช่องว่างระหว่างทวีตและขอบด้านบนของตัวแบ่ง ระยะขอบตั้งช่องว่างระหว่างขอบด้านล่างของตัวแบ่งและทวีตถัดไป.
    • บรรทัดที่สามกำหนดสีของทวีตรวมถึงลิงค์และทำให้แน่ใจว่าไม่มีบรรทัดใดแสดงด้านล่างลิงก์.
    • บรรทัดสุดท้ายกำหนดสีของลิงก์“ เวลาที่ผ่านมา”.

    และนั่นมัน! หากฉันต้องเปลี่ยนสิ่งหนึ่งฉันต้องแยกความแตกต่างของลิงก์ในทวีตอย่างใดและอาจเพิ่มเอฟเฟกต์โฮเวอร์บนลิงก์เช่นกัน.

    สามารถใช้กับเว็บไซต์ใด ๆ ก็ได้

    ไม่เหมือนคนอื่นทั้งหมด วิธีการทำ XYZ โดยไม่ต้องใช้ปลั๊กอิน โพสต์ที่นั่นไม่มีรหัส WordPress จริงที่ใช้ในการกวดวิชานี้.

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

    หากคุณต้องการใช้ภายใน WordPress ฉันขอแนะนำให้แก้ไขไฟล์ธีมของคุณด้วยตนเองเพื่อแทรก Javascript สองบรรทัดในส่วนท้ายของไซต์ของคุณหรือแม้กระทั่งเชื่อมโยงเข้ากับตะขอของ wp_footer ().

    สำหรับวิดเจ็ตนั้นคุณสามารถวางรหัสในวิดเจ็ตข้อความหรือโค้ดด้วยตนเองลงในแถบด้านข้างของคุณ (หรือที่ใดก็ได้).

    ข้อสรุป

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

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