Tạo một tiện ích Twitter tùy chỉnh mà không cần một plugin

Tôi đã được hỏi một vài lần về plugin WordPress nào tôi sử dụng để tạo danh sách Twitter Twitter Feed trên trang web của tôi. Tôi thực sự không sử dụng một plugin nào cả, nó là một đoạn Javascript từ Twitter hiển thị danh sách các tweet gần đây của tôi mà tôi đã tạo kiểu bằng CSS. Trong hướng dẫn này, tôi sẽ chỉ cho bạn:


  • Mã HTML và Javascript cần thiết để lấy các tweet mới nhất
  • Tổng quan về đánh dấu HTML và các bộ chọn CSS có liên quan
  • Hai ví dụ về các tiện ích Twitter được tạo kiểu tùy chỉnh mà tôi đã sử dụng

Đọc tiếp để xem phần còn lại của hướng dẫn

HTML và Javascript

Twitter đã từng cung cấp mã này trên trang web của họ nhưng vì một số lý do, họ đã xóa nó để ủng hộ vật dụng kém linh hoạt hơn nhiều. Bạn sẽ cần hai đoạn mã.

Đầu tiên, đặt mã sau đây nơi bạn muốn danh sách hiển thị:

  • Đang tải nguồn cấp dữ liệu Twitter

Ghi chú: Các

  • Đang tải nguồn cấp dữ liệu Twitter
  • không phải là một phần của mã gốc mà Twitter cung cấp, nhưng nó bắt buộc phải có để xác thực HTML. Nó cũng có thể cung cấp một thông báo hữu ích trong khi nguồn cấp dữ liệu đang tải, vì có thể mất vài giây vào một ngày chậm.

    Thứ hai, bạn sẽ cần đặt các dòng Javascript sau đây càng gần thẻ càng tốt.

    Tôi hiện có nó ngay trên mã Google Analytics của mình. Bạn nên giữ các dòng Javascript này càng thấp càng tốt trên trang vì trong trường hợp Twitter không tải Tải xuống, mọi thứ bên dưới mã đó sẽ bị treo (đó là một vấn đề lớn nếu nó đã ở dưới cùng).

    Tổng quan về HTML Markup và CSS Selector

    Giờ đây, bạn có thể nhìn thấy đánh dấu HTML mà tiện ích Twitter tạo ra mà không cần sử dụng cái gì đó như Thanh công cụ dành cho nhà phát triển web. May mắn cho bạn, tôi đã làm điều đó cho bạn. Dưới đây, một danh sách mẫu chỉ có một tweet làm ví dụ.

    • #twitter_update_list – Chọn toàn bộ danh sách
    • #twitter_update_list li – Chọn các mục danh sách riêng lẻ
    • #twitter_update_list li span – Chọn phần tweet tweet của Tweet trong mục danh sách, không phải liên kết thời gian trước
    • #twitter_update_list li span a – Chọn liên kết trong phần tweet tweet của một phần của danh sách
    • #twitter_update_list a [style ="cỡ chữ: 85%;"] – Chọn liên kết của Thời gian trước, trước đây, theo cách hơi khó hiểu (xem ghi chú bên dưới).

    Ghi chú: Vì có một kiểu nội tuyến trong liên kết thời gian trước đó đặt kích thước phông chữ ở mức 85%, điều này khiến cho việc ghi đè mà không có một đoạn mã nào khó khăn. Tôi đã sử dụng điều này trước đây để đặt lại kích thước phông chữ giống như phần còn lại của danh sách:

    #twitter_update_list a [style ="cỡ chữ: 85%;"] {cỡ chữ: 1em! quan trọng; }

    Điều đó có lẽ không hoạt động trong các phiên bản đầu tiên của IE vì phần này rất quan trọng. Bạn cũng có thể sử dụng display: block; để di chuyển liên kết đó đến dòng tiếp theo.

    Ví dụ trực tiếp

    Để biết ví dụ trực tiếp, hãy xem phần chân trang của Phòng thí nghiệm chủ đề. Hoặc nếu bạn đang đọc phần này trong trình đọc nguồn cấp dữ liệu của bạn hoặc một trang web quét trái phép, hãy xem ảnh chụp màn hình bên dưới.

    Chủ đề phòng thí nghiệm Twitter Feed

    Đây là mã tôi sử dụng cho danh sách:

    #twitter_update_list {
    cỡ chữ: 13px;
    chiều cao dòng: 21px;
    danh sách kiểu: không có;
    }
    #twitter_update_list li {
    nền: url (‘hình ảnh / twitter-spliter.gif’) phía dưới bên trái lặp lại-x;
    đệm-dưới: 7px;
    lề dưới: 9px;
    }
    #twitter_update_list span, #twitter_update_list span a {
    màu: #ababab;
    trang trí văn bản: không có;
    }
    #twitter_update_list một {
    màu: # 6f7276;
    }

    • Dòng đầu tiên chọn toàn bộ danh sách. Nó đặt kích thước phông chữ, chiều cao dòng và đảm bảo không có dấu đầu dòng nào hiển thị.
    • Dòng thứ hai làm cho một hình ảnh 2 × 1 nhỏ lặp lại bên dưới mỗi mục danh sách dưới dạng một bộ chia. Phần đệm đặt khoảng trống giữa tweet và cạnh trên của dải phân cách. Lề đặt khoảng trống giữa cạnh dưới của dải phân cách và tweet tiếp theo.
    • Dòng thứ ba đặt màu của tweet, bao gồm các liên kết và đảm bảo không có dòng nào hiển thị bên dưới các liên kết.
    • Dòng cuối cùng đặt màu của liên kết trước.

    Và đó là điều đó! Nếu tôi phải thay đổi một điều, tôi sẽ phân biệt các liên kết trong tweet bằng cách nào đó và cũng có thể thêm hiệu ứng di chuột vào các liên kết.

    Điều này có thể được sử dụng trên bất kỳ trang web

    Không giống như tất cả những người khác Cách làm XYZ mà không cần plugin bài viết ngoài kia, không có mã WordPress thực tế được sử dụng trong hướng dẫn này.

    Vì điều này không sử dụng mã WordPress, nên nó không được nộp theo Hướng dẫn WordPress bộ sưu tập. Nó có thể được sử dụng trên hầu hết mọi loại trang web, giả sử bạn có thể chỉnh sửa nguồn HTML và CSS.

    Nếu bạn muốn sử dụng nó trong WordPress, tôi khuyên bạn nên chỉnh sửa thủ công các tệp chủ đề của mình để chèn hai dòng Javascript vào chân trang của trang web hoặc thậm chí móc nó vào hook wp_footer () của bạn.

    Đối với chính tiện ích con, bạn có thể dán mã bên trong tiện ích văn bản hoặc mã thủ công vào thanh bên (hoặc bất cứ nơi nào).

    Phần kết luận

    Hy vọng tất cả các bạn thích hướng dẫn, tôi thích nghe suy nghĩ của bạn trong các ý kiến. Nếu bạn có bất kỳ yêu cầu nào về các mẹo nhanh về WordPress hoặc CSS, vui lòng cho tôi biết. Nó có thể được giới thiệu trong bài đăng Hướng dẫn thứ ba trong tương lai tại 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