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
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);
};
yük (‘// connect.facebook.net/en_us/all.js#xfbml=1’, ‘fbjssdk’);
// google+
yük (‘https://isis.google.com/js/plusone.js’, ‘gplus1js’);
yük (‘// platform.twitter.com/widgets.js’, ‘tweetjs’);
// linedin
yük (‘// platform.linkedin.com/in.js’, ‘lnkdjs’);
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
(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);
};
yük (‘//connect.facebook.net/en_us/all.js#xfbml=1’, ‘fbjssdk’);
// google+
yük (‘https://isis.google.com/js/plusone.js’, ‘gplus1js’);
Yük (‘//platform.twitter.com/widgets.js’, ‘tweetjs’);
// linedin
yük (‘//platform.linkedin.com/in.js’, ‘lnkdjs’);
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
İş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!