WordPress’e mutlu bir seçim ve tweet nasıl eklenir (artı ücretsiz eklenti!)
Son haftalarda, blogumuzda metin seçme ve tweet atma olanağı ekledik. Bu özelliği bulamadıysanız, şimdi deneyin. Harika, değil mi? Ön uç geliştiricilerimizden biri olan Cataalin Nita, bu özelliği blogumuz için toplıyor (teşekkür ederim, Cataalin!) Ve bugün sizinle paylaşacağımızı düşünüyoruz, böylece kullanabilirsiniz. Bugün size nasıl yönetileceğiniz konusunda size rehberlik edeceğim ve yazının sonundaki ücretsiz eklentiyi indirebilirsiniz. Ortamdaki bir gönderi okursanız nasıl çalışır, bu birkaç pratik işleve alışacaksınız, bu da okuyucuların bir dizi kelimeyi vurgulamasını ve hemen paylaşmasını kolaylaştırır. Ortamda, metni vurguladığınızda, sayfa seçtiğiniz kelimeleri tweetlemenize veya yorumlamanıza olanak tanıyan araç çubuğunu görüntüler.
Seçin ve tweet özellikleri, okuyucunuzun alıntı yapılabilecek tekliflerinizi paylaşması için düzgün bir yol sağlar.Sitemizdeki özellikler benzer şekilde çalışır. Bir kelimeyi iki kez tıkladığınızda veya birkaç kelimeyi vurguladığınızda, küçük Twitter simgesi görüntülenir. Simgeye tıkladığınızda, Tweet sermayesi, gönderme bağlantısı ile birlikte seçtiğiniz metni içererek otomatik olarak başlatılır. Bu özelliği, simgenin yüksek vurgulanan metnin üzerinde görüntülenmesi için tasarladık, böylece okuyucuyu çok fazla rahatsız etmeyecek. Ayrıca, okumak istediğiniz herhangi bir metni engellemek istemiyoruz.
WordPress sitenize “Seç ve Tweet” ekleyin Sitenize eklemenin en kolay yolu makalenin altına kaydırmak ve eklentiyi olduğu gibi indirmektir. Yükleyebilir, etkinleştirebilir ve hemen başlayabilirsiniz. Eklentinin standart bir WordPress sınıfı kullandığını ve yalnızca tek bir gönderi sayfasında çalışacağını unutmayın. Temanız standart bir sınıf adı kullanmalıdır, ancak değilse, büyük olasılıkla eklenti çalışmaz. Bu özelliği nasıl oluşturacağınızı öğrenmek istiyorsanız, sürekli okuyun, eklentiyi bu öğreticinin geri kalanında baştan kodlayacağız. Eklenti klasörünüze “Seç ve Tweet” adlı bir klasör için boş bir eklenti yapın ve yerleştirin İçinde “Select- and-tweet.php” adlı boş bir dosya. Dosyada, aşağıdaki içeriği yapıştırın – ihtiyaçlarınıza göre değiştirmekten çekinmeyin.
Çekirdek 220838AA9DD3804A7DEE içerir
Yapmamız gereken varlıklarımızı eklemek, yalnızca ana PHP dosyamızda bazı varlıkları sıralamaktır. Twitter simgesi, CSS dosyası ve JavaScript dosyası için yazı tipi ekranını kullanacağız. Eklenti dizininizde aşağıdaki dosyaları oluşturun:
Select-Dan-tweet.css
Select-Dan-theweet.js
Bittiğinde, bu dosyayı indirin ve eklenti dizininize çıkarın. Bu, içinde dört dosya bulunan bir Fonstories üretecektir. CSS ve JS dosyalarına herhangi bir içerik eklemeden önce, bunları enqueue. Select and-tweet.php dosyasında aşağıdaki kodu yapıştırın:
Çekirdek 220838AA9DD3804A7DEE içerir
Javascript JQuery kullanacağımız için, üçüncü parametreye eklenerek yükleneceğinden emin olduğumu unutmayın. Ayrıca, komut dosyasının altbilgiye yüklendiğinden emin olmak için beşinci parametre olarak True ekledim (daha önce gerekli değildir). Temel olarak JavaScript’i bulmak, kullanıcı birkaç metin seçtiğinde düğmeleri görüntülemek istiyoruz – doğru konumlandırın. Seçim işlemi bir MousEdown olayıyla başlar (kullanıcı fare düğmesine basar) ve fareup olayı (kullanıcı düğmeyi serbest bırakır) ile biter. Bunun doğru bir tıklama olmadığından emin olmak istiyoruz – bu durumda varsayılan tarayıcı menüsü görüntülenecek – ve en az üç karakter seçilecek. Bu, kasıtsız bir çift tıklama veya küçük bir seçimi önler. İlk olarak, güveneceğimiz iki destekleyici işlevi yazalım. Bunlardan biri, tıklamanın sağ tıklayıp tıklamadığını tespit etmektir, diğerleri seçilen metni geri yükler. Aşağıda, her ikisi için tam bir kod, her şeyi belgeye hazır bir çağrıya sarmanın yanı sıra. Tüm JavaScript kodları içine yerleştirilmelidir:
Çekirdek 220838AA9DD3804A7DEE içerir
Her şey bittikten sonra, iki etkinliğimize birkaç şey ekleme zamanı: Mouseup ve Mousedown. Cataalin tarafından eklenen olağanüstü satır içi belgeler dahil olmak üzere tam kod aşağıdadır:
Çekirdek 220838AA9DD3804A7DEE içerir
İki olayın sınıf. ENTRY-CONTENT ile ilgili olduğunu unutmayın. Fikir, kullanıcının yan, kanopi ve diğer yerlerden değil, gönderimizden paylaşacağıdır, çünkü sadece kafa karıştırıcı olacaktır. Bu, posta alanındaki her şeyi saklar.
Mousedown etkinliği daha kolay. İlk iki sıra, seçimin başlangıç konumunu bulmak için çalışır. Bu değer, düğmeyi daha sonra konumlandırmak için kullanılacaktır. İkincisi ancak bu eylemde, TwtShare sınıfını kullanan Paylaş düğmesini silmektir. MouseUp olayının ana kısmı, seçilen metnin uzunluğu 3 karakterden daha az veya eşitse (veya sağ -tıklatırsak) geçirilir. Her şey yolunda giderse, seçimin ucunun üst ve sol pozisyonunu alırız. Bu bilgilere dayanarak, başlangıç noktasının konumu ile birlikte, düğmenin orta konumunu hesaplayabiliriz. Bir sonraki adım, Twitter’a vereceğimiz URL’yi almak. Sonunda .slit [0] ekleyerek, tüm kuyruk dizelerini siliyoruz çünkü bu genellikle arzu edilmiyor. Kaydetmek veya kendi izleme parametrenizi eklemek istiyorsanız, burada yapabilirsiniz. Daha sonra, dağıtılan dize en fazla 107 karaktere kadar kesilir. Sonunda hesap adı ve elbette bağlantı gibi başka bir metin eklemek isteyebilirsiniz. Hesabınızı eklemek istiyorsanız, st = st + ‘@danielpataki’ gibi bir şey ekleyin; Dize 107 karaktere kısaltıldıktan sonra. Paylaşım düğmesi sınıfla basit bir bağlantı kullanılarak yapılır (ISI’ye eklenir). Son olarak, daha önce bulduğumuz değerler kullanılarak konumlandırıldı. Kısa ve tatlı stil sayfası düğmelerini düzenlemek ve yazı tipi yüz bildirimleri, simgelerle uğraşmak için bazı kurallar, .twtshare sınıfı için temel stiller ve animasyon için birkaç satır. Bu çok açık. Tam kod aşağıdadır:
Çekirdek 220838AA9DD3804A7DEE içerir
