플러그인없이 맞춤형 트위터 위젯 만들기

내 사이트 바닥 글에 “Twitter Feed”목록을 생성하는 데 사용하는 WordPress 플러그인에 대해 몇 번 질문을 받았습니다. 실제로 플러그인을 전혀 사용하지 않습니다. CSS로 스타일링 한 최근 트윗 목록을 표시하는 Twitter의 Javascript 스 니펫입니다. 이 자습서에서는 다음을 보여 드리겠습니다.


  • 최신 트윗을 가져 오는 데 필요한 HTML 및 Javascript 코드
  • HTML 마크 업 및 관련 CSS 선택기 개요
  • 내가 직접 사용한 맞춤형 스타일 트위터 위젯의 두 가지 예

나머지 튜토리얼을 보려면 계속 읽으십시오…

HTML과 자바 스크립트

트위터는 사이트에서이 코드를 제공했지만 어떤 이유로 든이 코드를 제거했습니다. 훨씬 덜 유연한 위젯. 두 가지 코드가 필요합니다.

먼저 목록을 표시 할 위치에 다음 코드를 배치하십시오.

  • 트위터 피드 로딩

노트 : 그만큼

  • 트위터 피드 로딩
  • Twitter에서 제공 한 원래 코드의 일부는 아니지만 HTML을 확인해야합니다. 피드가로드되는 동안 느린 메시지가 표시되는 데 몇 초가 걸릴 수 있으므로 유용한 메시지를 제공 할 수도 있습니다..

    둘째, 다음 자바 스크립트 줄을 배치해야합니다. 태그에 최대한 가까이.

    현재 Google 웹 로그 분석 코드 바로 위에 있습니다. Twitter가로드되지 않는 경우 해당 코드 아래의 모든 항목이 중단되므로 이미 자바 스크립트 행을 페이지에서 최대한 낮게 유지해야합니다 (이미 맨 아래에있는 경우 큰 문제는 아님)..

    HTML 마크 업 및 CSS 선택기 개요

    이제 Web Developer Toolbar와 같은 것을 사용하지 않고 Twitter 위젯이 생성하는 HTML 마크 업을 볼 수 없습니다. 운이 좋으 니 다행이다 예를 들어 트윗이 하나 뿐인 샘플 목록이 있습니다..

    • #twitter_update_list – 전체 목록을 선택합니다
    • #twitter_update_list li – 개별 목록 항목 선택
    • #twitter_update_list li span – 시간 전 링크가 아닌 목록 항목의 “트윗”부분을 선택합니다
    • #twitter_update_list li span a – 목록 항목의 “tweet”부분에서 링크를 선택합니다.
    • #twitter_update_list a [style ="서체 크기 : 85 %;"] – 다소 해킹 된 방식으로 “시간 전”링크를 선택합니다 (아래 참고 참조)..

    노트 : 글꼴 크기를 85 %로 설정하는 시간 전 링크에 인라인 스타일이 있기 때문에 해킹 된 코드없이 대체하기가 다소 어렵습니다. 글꼴 크기를 나머지 목록과 동일하게 재설정하기 전에 이것을 사용했습니다.

    #twitter_update_list a [style ="서체 크기 : 85 %;"] {font-size : 1em! 중요; }

    “! 중요한”부분으로 인해 초기 버전의 IE에서는 작동하지 않을 수 있습니다. display : block;을 사용할 수도 있습니다. 해당 링크를 다음 줄로 이동.

    라이브 예

    실제 예를 보려면 바닥 글을 확인하십시오. 테마 랩. 또는 피드 리더 또는 승인되지 않은 스크레이퍼 사이트에서이 내용을 읽는 경우 아래 스크린 샷을 확인하십시오..

    테마 랩 Twitter 피드

    목록에 사용하는 코드는 다음과 같습니다.

    #twitter_update_list {
    글꼴 크기 : 13px;
    줄 높이 : 21px;
    리스트 스타일 : 없음;
    }
    #twitter_update_list li {
    배경 : url ( ‘images / twitter-divider.gif’) 왼쪽 아래 반복 -x;
    안쪽 여백 : 7px;
    여백-하단 : 9px;
    }
    #twitter_update_list 범위, #twitter_update_list 범위 {
    색깔 : #ababab;
    텍스트 장식 : 없음;
    }
    #twitter_update_list {
    색상 : # 6f7276;
    }

    • 첫 번째 줄은 전체 목록을 선택합니다. 글꼴 크기, 줄 높이를 설정하고 글 머리 기호가 표시되지 않도록합니다..
    • 두 번째 줄은 각 목록 항목 아래에 작은 2×1 이미지 반복을 일종의 구분선으로 만듭니다. 패딩은 트윗과 디바이더의 상단 가장자리 사이의 공간을 설정합니다. 여백은 분배기의 아래쪽 가장자리와 다음 트윗 사이의 공간을 설정합니다..
    • 세 번째 줄은 링크를 포함하여 트윗의 색상을 설정하고 링크 아래에 줄이 표시되지 않도록합니다..
    • 마지막 줄은 “time ago”링크의 색상을 설정합니다.

    그리고 그게 다야! 한 가지만 변경해야한다면 트윗 링크를 어떻게 든 차별화하고 링크에 호버 효과를 추가 할 수도 있습니다..

    이것은 모든 사이트에서 사용할 수 있습니다

    다른 모든 것과 달리 플러그인없이 XYZ를 수행하는 방법 이 튜토리얼에서 사용되는 실제 WordPress 코드는 없습니다..

    이 코드는 워드 프레스 코드를 사용하지 않기 때문에 워드 프레스 튜토리얼 수집. HTML 소스와 CSS를 편집 할 수 있다고 가정하면 거의 모든 종류의 사이트에서 사용할 수 있습니다..

    WordPress에서 사용하려면 테마 파일을 수동으로 편집하여 사이트 바닥 글에 두 줄의 Javascript를 삽입하거나 wp_footer () 후크에 연결하는 것이 좋습니다.

    위젯 자체는 텍스트 위젯 안에 코드를 붙여 넣거나 수동으로 사이드 바에 코드를 붙여 넣을 수 있습니다..

    결론

    여러분 모두 튜토리얼을 좋아하길 바랍니다. 의견에 대한 여러분의 의견을 듣고 싶습니다. 빠른 WordPress 또는 CSS 팁에 대한 요청이 있으면 언제든지 알려주십시오. 테마 랩의 향후 자습서 포스트에 실릴 수 있습니다.!

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