შეაკეთეთ Twitter ვიჯეტი დანამატის გარეშე

რამდენჯერმე მკითხეს, თუ რომელ WordPress მოდულს ვიყენებ ჩემი საიტის ქვედა გვერდში “Twitter Feed” სიის შესაქმნელად. მე პრაქტიკულად არ ვხმარობ მოდულს, ეს არის Javascript- ის ნაწყვეტი ტვიტერისგან, რომელიც აჩვენებს ჩემი ბოლოდროინდელი ტვიტერების ჩამონათვალს, რომელსაც მე ვიყენებ CSS- ით. ამ გაკვეთილზე მე გაჩვენებთ:


  • აუცილებელი HTML და Javascript კოდი უახლესი ტვიტერების გასაღებად
  • მიმოხილვა HTML მარკირებისა და მასთან დაკავშირებული CSS ამორჩეულის შესახებ
  • Twitter- ის ვიჯეტის ვიჯეტის ვიზუალიზაციის ორი მაგალითი, მე თვითონ გამოვიყენე

წაიკითხეთ დანარჩენი გაკვეთილის ნახვა…

HTML და Javascript

ტვიტერმა ამ კოდს მის საიტზე მიაწოდა, მაგრამ რატომღაც ამოიღეს იგი ამ სასარგებლოდ გაცილებით ნაკლებად მოქნილი ვიჯეტები. ორიოდე კოდი დაგჭირდებათ.

პირველი, განათავსეთ შემდეგი კოდი, სადაც გსურთ, რომ სია გამოჩნდეს:

  • ტვიტერის საკვების ჩატვირთვა

Შენიშვნა:

  • ტვიტერის საკვების ჩატვირთვა
  • ეს არ არის 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 a span – ირჩევს ბმულს სიის პუნქტის “ტვიტერის” ნაწილში
    • #twitter_update_list a [სტილი ="შრიფტის ზომა: 85%;"] – ირჩევს ბმულს „დროზე ადრე“ გარკვეულწილად აურზაური გზით (იხ. შენიშვნა ქვემოთ).

    Შენიშვნა: იმის გამო, რომ აქამდე არსებობს ბმული სტრიქონის სტილი, რომელიც შრიფტის ზომას 85% ადგენს, ეს გარკვეულწილად რთულდება გადაცდენილი კოდის გარეშე. მე ეს ადრე გამოვიყენე, რომ შრიფტის ზომა იგივე განმეორებულიყო, როგორც დანარჩენი სია:

    #twitter_update_list a [სტილი ="შრიფტის ზომა: 85%;"] {font-size: 1em! მნიშვნელოვანი; }

    ეს ალბათ არ მუშაობს ადრეულ ვერსიებში IE “! მნიშვნელოვანი” ნაწილის გამო. ასევე შეგიძლიათ გამოიყენოთ დისპლეი: ბლოკი; ამ ბმულის გადატანა შემდეგ სტრიქონზე.

    ცოცხალი მაგალითი

    ცოცხალი მაგალითისთვის, გადახედეთ ქვედა ფრაგმენტს თემის ლაბორატორია. ან თუ ამას კითხულობთ თქვენს თქვენს წამკითხველ მკითხველში ან უნებართვო გამანადგურებელ საიტზე, შეამოწმეთ ქვემოთ მოცემული ეკრანის სურათი.

    თემის ლაბორატორია Twitter Feed

    აქ მოცემულია კოდი, რომელსაც სიას ვიყენებ:

    #twitter_update_list {
    შრიფტის ზომა: 13px;
    line-height: 21px;
    list-style: არცერთი;
    }
    #twitter_update_list li
    ფონი: url (‘images / twitter-divider.gif’) მარცხენა ქვედა გამეორება-x;
    padding-ბოლოში: 7px;
    ზღვარი-ქვედა: 9px;
    }
    #twitter_update_list span, #twitter_update_list span a {
    ფერი: #ababab;
    ტექსტის გაფორმება: არცერთი;
    }
    #twitter_update_list a
    ფერი: # 6f7276;
    }

    • პირველი ხაზი ირჩევს მთელ ჩამონათვალს. იგი ადგენს შრიფტის ზომას, ხაზის სიმაღლეს და დარწმუნდება, რომ ტყვიის ქულები არ გამოჩნდება.
    • მეორე სტრიქონი ქმნის მცირე ზომის 2 × 1 სურათს თითოეული სიის ელემენტის ქვემოთ, როგორც გამყოფი. Padding ადგენს სივრცეში tweet და გამყოფი ზედა ზღვარს შორის. ზღვარი ადგენს ადგილს გამყოფის ქვედა კიდეზე და შემდეგ ტვიტერს შორის.
    • მესამე ხაზი ადგენს ტვიტის ფერს, ბმულების ჩათვლით და დარწმუნებულია, რომ არცერთი სტრიქონი არ ჩანს ბმულების ქვემოთ.
    • ბოლო სტრიქონი განსაზღვრავს ბმულს “დროზე ადრე”.

    ეს არის ის! თუ ერთი რამის შეცვლა მომიწევდა, მე რატომღაც გავარჩიე შიდა ტვიტერის ბმულები და, შესაძლოა, დაამატოთ hover ეფექტები ბმულებზეც.

    ეს შეიძლება გამოყენებულ იქნას ნებისმიერ საიტზე

    ყველა დანარჩენისგან განსხვავებით როგორ გავაკეთოთ XYZ მოდულის გარეშე იქ გამოქვეყნებულია, ამ სამეურვეო პროგრამაში არ არის გამოყენებული WordPress კოდი.

    ვინაიდან ეს არ იყენებს WordPress კოდს, იგი არ არის დატანილი ქვეშ WordPress გაკვეთილები კოლექცია. იგი შეიძლება გამოყენებულ იქნას თითქმის ყველა სახის საიტზე, იმ პირობით, თუ შეგიძლიათ შეცვალოთ HTML წყარო და CSS.

    თუ გსურთ გამოიყენოთ იგი WordPress– ის ფარგლებში, მე გირჩევთ თქვენი ხელით რედაქტირება მოახდინოთ თქვენი თემის ფაილების ჩასმა, რომ Javascript– ის ორი სტრიქონი ჩადოთ თქვენს საიტის ქვედა ნაწილში, ან თუნდაც თქვენი wp_footer () Hook– ში ჩასმა..

    რაც შეეხება ვიჯეტს, შეგიძლიათ შეიყვანოთ კოდი ტექსტის ვიჯეტის შიგნით, ან ხელით კოდირება თქვენს გვერდით (ან სადაც არ უნდა იყოს).

    დასკვნა

    იმედი მაქვს, რომ ყველას მოგეწონა სახელმძღვანელო, მე მიყვარს თქვენი აზრების მოსმენა კომენტარებში. თუ თქვენ გაქვთ რაიმე მოთხოვნა 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