Buat Widget Twitter Tersuai Tanpa Plugin

Saya telah ditanya beberapa kali mengenai plugin WordPress yang saya gunakan untuk menghasilkan senarai “Twitter Feed” di bahagian bawah laman web saya. Saya sebenarnya tidak menggunakan plugin sama sekali, itu adalah potongan Javascript dari Twitter yang memaparkan senarai tweet baru-baru ini yang saya gayakan dengan CSS. Dalam tutorial ini, saya akan menunjukkan kepada anda:


  • Kod HTML dan Javascript yang diperlukan untuk menarik tweet terkini
  • Gambaran keseluruhan penanda HTML dan pemilih CSS yang berkaitan
  • Dua contoh widget Twitter khas yang saya gunakan sendiri

Teruskan membaca untuk melihat tutorial yang lain …

HTML dan Javascript

Twitter biasa memberikan kod ini di laman web mereka tetapi atas sebab tertentu mereka menghapusnya untuk memilihnya widget lebih kurang fleksibel. Anda memerlukan dua keping kod.

Pertama, letakkan kod berikut di mana anda mahu senarai itu muncul:

  • Memuatkan suapan Twitter

Nota: The

  • Memuatkan suapan Twitter
  • bukan merupakan sebahagian daripada kod asal yang disediakan Twitter, tetapi diperlukan untuk mengesahkan HTML. Ini juga dapat memberikan pesan yang berguna saat umpan dimuat, karena dapat memakan waktu beberapa saat pada hari yang lambat.

    Kedua, anda perlu meletakkan baris Javascript berikut sedekat mungkin dengan teg.

    Saya sekarang memilikinya tepat di atas kod Analitis Google saya. Anda harus menyimpan baris Javascript ini serendah mungkin di halaman kerana sekiranya Twitter tidak dimuat, semua perkara di bawah kod itu akan tergantung (yang bukan masalah besar jika sudah ada di bahagian bawah).

    Gambaran keseluruhan Pemilihan HTML dan Pemilih CSS

    Kini anda tidak dapat melihat markup HTML yang dihasilkan widget Twitter tanpa menggunakan sesuatu seperti Bar Alat Pembangun Web. Beruntung untuk anda, saya berjaya melakukannya untuk anda. Berikut adalah senarai contoh dengan hanya satu tweet sebagai contoh.

    • #twitter_update_list – Memilih keseluruhan senarai
    • #twitter_update_list li – Pilih item senarai individu
    • #twitter_update_list li span – Memilih bahagian “tweet” dari item senarai, bukan pautan yang lalu
    • #twitter_update_list li span a – Memilih pautan dalam bahagian “tweet” dari item senarai
    • #twitter_update_list a [style ="saiz fon: 85%;"] – Memilih pautan “masa lalu”, dengan cara yang agak hacky (lihat nota di bawah).

    Nota: Oleh kerana terdapat pautan gaya sebaris pada masa lalu yang menetapkan ukuran fon pada 85%, menjadikannya agak sukar untuk diganti tanpa sepotong kod yang tidak masuk akal. Saya telah menggunakannya sebelum ini untuk menetapkan semula ukuran fon agar sama dengan senarai yang lain:

    #twitter_update_list a [style ="saiz fon: 85%;"] {font-size: 1em! penting; }

    Itu mungkin tidak berfungsi pada versi awal IE kerana bahagian “! Penting”. Anda juga boleh menggunakan display: block; untuk memindahkan pautan itu ke baris seterusnya.

    Contoh Langsung

    Untuk contoh langsung, lihat bahagian bawah Makmal Tema. Atau jika anda membaca ini di pembaca suapan atau laman pengikis yang tidak sah, lihat tangkapan skrin di bawah.

    Suapan Twitter Makmal Tema

    Inilah kod yang saya gunakan untuk senarai:

    #twitter_update_list {
    saiz fon: 13px;
    ketinggian garisan: 21px;
    gaya senarai: tiada;
    }
    #twitter_update_list li {
    latar belakang: url (‘images / twitter-divider.gif’) ulangan kiri bawah-x;
    padding-bottom: 7px;
    margin-bottom: 9px;
    }
    #twitter_update_list span, #twitter_update_list span a {
    warna: #ababab;
    hiasan teks: tiada;
    }
    #twitter_update_list a {
    warna: # 6f7276;
    }

    • Baris pertama memilih keseluruhan senarai. Ini menetapkan ukuran fon, ketinggian garis, dan memastikan tidak ada titik peluru yang muncul.
    • Baris kedua menjadikan gambar kecil 2 × 1 berulang di bawah setiap item senarai sebagai semacam pembahagi. Padding menetapkan ruang antara tweet dan tepi atas pembahagi. Margin menetapkan ruang antara tepi bawah pembahagi dan tweet seterusnya.
    • Baris ketiga menetapkan warna tweet, termasuk pautan, dan memastikan tidak ada garis yang muncul di bawah pautan.
    • Baris terakhir menetapkan warna pautan “masa lalu”.

    Itu sahaja! Sekiranya saya terpaksa mengubah satu perkara, saya akan membezakan pautan dalam-tweet entah bagaimana, dan mungkin menambah kesan hover pada pautan juga.

    Ini Boleh Digunakan Di Mana-mana Laman Web

    Tidak seperti yang lain cara melakukan XYZ tanpa pemalam catatan di luar sana, tidak ada kod WordPress sebenar yang digunakan dalam tutorial ini.

    Oleh kerana ini tidak menggunakan kod WordPress, itu tidak difailkan di bawah Tutorial WordPress koleksi. Ia boleh digunakan di hampir semua jenis laman web, dengan andaian anda dapat mengedit sumber HTML dan CSS.

    Sekiranya anda ingin menggunakannya dalam WordPress, saya cadangkan untuk mengedit fail tema anda secara manual untuk memasukkan dua baris Javascript di bahagian bawah laman web anda, atau bahkan menghubungkannya ke cangkuk wp_footer () anda.

    Untuk widget itu sendiri, anda boleh menampal kod di dalam widget teks atau secara manual memasukkannya ke bar sisi anda (atau di mana sahaja).

    Kesimpulannya

    Harap anda semua menyukai tutorial, saya ingin mendengar pendapat anda dalam komen. Sekiranya anda mempunyai permintaan untuk mendapatkan petua WordPress atau CSS yang cepat, sila beritahu saya. Ia mungkin dipaparkan dalam catatan Tutorial Selasa yang akan datang di Makmal Tema!

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