WordPress’te eşzamansız sosyal medya paylaşım düğmeleri içerir

Eşyalarınızı sosyal ağlar aracılığıyla paylaşmak önemlidir. Ve sayfanın yükleme süresi! Bu kısa öğretici, WordPress temasına sosyal medya paylaşım düğmelerini nasıl yükleyebileceğinizi ve sayfanızın hızını nasıl artırabileceğinizi gösterecektir. “Asenkron yükleme” ile kastedilen nedir? Bu, Sosyal Paylaşım düğmesinin sayfanız oluşturulduğunda aynı anda sayfanızda yükleneceği ve çalıştırılacağı anlamına gelir, bu da web sitenizin ziyaretçilerinizin içeriğinizi görmek için daha az beklemesi gerektiği anlamına gelir. Fayda:
Meks tarafından önerilen en iyi barındırma

Bu, sayfanızın hızını artıracaktır (yükleme süresi). Web sitenizin diğer sunuculardan (sosyal ağlar) yanıt beklemesi gerekmez.
Web siteniz tamamen bağımsızdır, yani Facebook veya Twitter şu anda aşağı veya aşırı yüklenmişse, içeriğinizin her zaman ziyaretçileriniz için kullanılabilir olacağı anlamına gelir.
Ziyaretçilerinizin beklemesi gerekmez ve başka web sitelerine koşmazlar. Oranınızı ve SEO oranınızı artırın!
Web sitenizde tutarsanız ziyaretçilerinizin makalelerinizi paylaşma olasılığı daha yüksek olacaktır. Dağıtılan makale sayısını artırın, yani daha fazla ziyaretçi anlamına gelir!
Bu örnekte size bu tekniği WordPress temanızda nasıl uygulayabileceğinizi açıklayacağız. Öğreticiler, eşzamansız Facebook, Twitter, LinkedIn, Pinterest ve Google+ yüklemeyi içerir.
Ayrıca bakınız: JavaScript’i yalnızca belirli bir WordPress sayfasına yükleyin
Adım 1: Bir JavaScript Dosyası Oluşturun Örneğin, Share.js adını vereceğiz ve kök tema klasöründeki JS klasörüne koyacağız. Aşağıdaki kod:
/ * Asynchronus Paylaşım düğmelerinin yükü için komut dosyası */ (işlev (w, d, s) {
İşlev Go () {
var js, fjs = d.getElementsByTagName (s) [0], load = function (url, id) {
if (d.getElementById (id)) {return;}
Js = d.createelement (ler); Js.src = url; js.id = id;
fjs.parentnode.insertBefore (js, fjs);
};
//Facebook
yük (‘// connect.facebook.net/en_us/all.js#xfbml=1’, ‘fbjssdk’);
// google+
yük (‘https://isis.google.com/js/plusone.js’, ‘gplus1js’);
// Twitter
yük (‘// platform.twitter.com/widgets.js’, ‘tweetjs’);
// linedin
yük (‘// platform.linkedin.com/in.js’, ‘lnkdjs’);
// pinterest
yük (‘// assets.pinterest.com/js/pinit.js’, ‘pinitjs’);
}
if (w.addeventListener) {w.addeventListener (“yük”, git, false); }
else if (w.attacheVent) {w.attacheVent (“onload”, Go); }
} (pencere, belge, ‘komut dosyası’));

>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 / * Asynchronus Paylaşım Düğmeleri yükü için komut dosyası */
(W, D, S) {
İşlev Go () {
Var js, fjs = D. getElementsByTagName (S) [0], yük = işlev (url, id) {
if (d. PetElementById (id)) {return; }
JS = D. CreateElement (ler); JS. src = url; JS. id = id;
FJS. ParentNode. İnsertBefore (JS, FJS);
};
//Facebook
yük (‘//connect.facebook.net/en_us/all.js#xfbml=1’, ‘fbjssdk’);
// google+
yük (‘https://isis.google.com/js/plusone.js’, ‘gplus1js’);
// Twitter
Yük (‘//platform.twitter.com/widgets.js’, ‘tweetjs’);
// linedin
yük (‘//platform.linkedin.com/in.js’, ‘lnkdjs’);
// pinterest
Yük (‘//assets.pinterest.com/js/pinit.js’, ‘pinitjs’);}
if (w. addventListener) {w. addventListener (“yük”, go, false); }
else (w. attachtevent) {w. AttachtEvent (“Onload”, Go); }
} (pencere, belge, ‘komut dosyası’));

Adım 2: Enqueue Dosya Share.js Temanızdaki, temanızdaki functions.php dosyasına eklemeniz gereken kodun bir parçasıdır:
/ * Tema işlevinizin içindeki komut dosyasını enqueue. Php */
İşlev meks_load_scripts () {
/* Bu, JS dosyasını yalnızca yayınlarınız için yükler,
Aynı şeyi sayfalar için kullanmak istiyorsanız, “is_singular ()” kullanın.
Veya arşiv sayfalarında da kullanmak istiyorsanız, “If” ifadesini tamamen kaldırın. */
if (is_single ()) {
wp_enqueue_script (‘meks_async_share’, trailingsLashite (get_template_directory_uri ()). ‘/js/share.js’, dizi (‘jQuery’));
}
}
Add_action (‘wp_enqueue_scripts’, ‘meks_load_scripts’);

>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 / * Tema işlevinizin içindeki komut dosyasını enqueue. Php */
İşlev meks_load_scripts () {
/* Bu, JS dosyasını yalnızca yayınlarınız için yükler,
Aynı şeyi sayfalar için kullanmak istiyorsanız, “is_singular ()” kullanın.
Veya arşiv sayfalarında da kullanmak istiyorsanız, “If” ifadesini tamamen kaldırın. */
if (is_single ()) {
wp_enqueue_script (‘meks_async_share’, trailingsLashite (get_template_directory_uri ()). ‘/js/share.js’, dizi (‘jQuery’));
}
}
Add_action (‘wp_enqueue_scripts’, ‘meks_load_scripts’);

Adım 3: HTML Kodu bölümünü şablonunuza yerleştirin Sadece bir adım daha vardır. Komut dosyası çalıştırıldıktan sonra paylaşım düğmesiyle doldurulacak gerçek şablonunuza “yer tutucu” i koymalısınız. En iyi uygulamanın her zaman “Loop” da kullanmak olduğunu lütfen unutmayın. Single.php, index.php veya istediğiniz yerde bulunabilir. Aşağıdakiler temel bir örnek:

<a class="twitter-she-button" data-count="vertical" data-via="makshq" data-ul=" “>

<script type = "in/share" data-counter = "üst" data-ul = "”>

<div class = "fb benzeri" veri-send = "false" data-layout = "box_count" data-show-faces = "false" data-href = "”>

<g: plusone boyutu = "uzun" data-href = "”>

<a href="http://pinterest.com/pin/create/button/?url= “class =” pin-it-button “count-layout =” dikey “>

>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<a class = "twitter -share -button" data – count = "vertical" data – via = "Mekshq" data – url = " “>

<script type = "in/share" data-counter = "üst" data-ul = "”>

<div class = "fb -benzeri" veri – gönder = "false" veri – layout = "box_count" verileri – width = "50" veri – göster – yüzler = "false" veriler – href = " “>

<g: plusone boyutu = "uzun" verileri – href = "”>

<a href = "http://pinterest.com/pin/create/button/?url= & medya = <? php echo wp_get_attachment_url (get_post_thumbnail_id (); “class =” pin-it-button “count-Layout =” dikey “>

Ve hepsi bu!Adım yok!
Ayrıca bakınız: değişkeni get_template_part () wordPress işlevine aktarmak
Doğrudan örnek?Tüm bunları doğrudan Safarica WordPress tema demo web sitemizde görebilirsiniz.Yorumlarınızı ve düşüncelerinizi paylaşmaktan çekinmeyin!

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir