Зробіть користувальницький віджет Twitter без плагіна

Мене кілька разів запитували про те, який плагін WordPress я використовую для створення списку “Потік Twitter” у нижньому колонтитулі мого сайту. Я фактично взагалі не використовую плагін, це фрагмент Javascript з Twitter, який відображає список моїх останніх твітів, які я стилізував за допомогою CSS. У цьому підручнику я покажу вам:


  • Необхідний код HTML та Javascript, щоб витягнути останні твіти
  • Огляд розмітки HTML та пов’язаних з цим селекторів CSS
  • Два приклади користувальницьких стилів Twitter, якими я користувався сам

Читайте далі, щоб переглянути решту підручника …

HTML та Javascript

Twitter використовував цей код на своєму сайті, але чомусь вони видалили його на користь набагато менш гнучкі віджети. Вам знадобляться два фрагменти коду.

По-перше, розмістіть такий код, де ви хочете відобразити список:

  • Завантаження каналу Twitter

Примітка: The

  • Завантаження каналу Twitter
  • не є частиною оригінального коду, який надається Twitter, але для його підтвердження потрібен HTML-код. Він також може надати корисне повідомлення під час завантаження каналу, оскільки це може зайняти кілька секунд у повільний день.

    По-друге, вам потрібно буде розмістити наступні рядки Javascript якомога ближче до тегу.

    На даний момент я маю це прямо над своїм кодом Google Analytics. Ви повинні зберігати ці рядки Javascript якомога нижче на сторінці, оскільки у випадку, якщо Twitter не завантажиться, все нижче цього коду буде висіти (що не є великою справою, якщо він уже знаходиться внизу).

    Огляд розмітки HTML та селекторів CSS

    Тепер ви не можете бачити розмітку HTML, яку створює віджет Twitter, не використовуючи щось на зразок Панелі інструментів веб-розробників. Пощастило тобі, я зробив це за тебе. Ось зразковий список із прикладом лише одного твіту.

    • #twitter_update_list – Вибирає весь список
    • #twitter_update_list li – Вибір окремих елементів списку
    • #twitter_update_list li span – Вибирає “твіт” частини елемента списку, а не посилання назад
    • #twitter_update_list li span a – Вибір посилання у частині “твіт” частини списку
    • #twitter_update_list a [style ="розмір шрифту: 85%;"] – Вибирає посилання “час тому” дещо хакітно (див. Примітку нижче).

    Примітка: Оскільки в посиланнях часу тому існує вбудований стиль, який встановлює розмір шрифту на 85%, його важко переосмислити без хитких фрагментів коду. Я використовував це раніше, щоб скинути розмір шрифту таким же, як у решті списку:

    #twitter_update_list a [style ="розмір шрифту: 85%;"] {font-size: 1em! важливо; }

    Це, ймовірно, не працює в ранніх версіях IE через “! Важливу” частину. Ви також можете використовувати display: block; щоб перейти посилання на наступний рядок.

    Живий приклад

    Для живого прикладу перегляньте колонтитул Тематична лабораторія. Або якщо ви читаєте це у своєму читальнику каналів чи на несанкціонованому веб-сайті скрепера, перегляньте знімок екрана нижче.

    Тема лабораторії

    Ось код, який я використовую для списку:

    #twitter_update_list {
    розмір шрифту: 13px;
    висота лінії: 21 пікселів;
    список-стиль: немає;
    }
    #twitter_update_list li {
    фон: url (‘images / twitter-divideer.gif’) нижній лівий повтор-x;
    підкладка-дно: 7px;
    margin-bottom: 9 пікселів;
    }
    #twitter_update_list span, #twitter_update_list span a {
    колір: #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