WordPress için AMP’yi en üst düzeye çıkarmak
Duyarlı web tasarımı ve her yerde yüksek hızlı hücresel internetten önce, çoğu web sitesi sitelerinin özel bir hücresel sürümünü oluşturur. Daha hızlı bir sürüm sağlamak için lüks CSS sitelerinin ve diğer işlevlerin çoğunu ortadan kaldıran hücresel versiyon. O zamanlar, bu gerekli olan bir suçtu, çünkü masaüstü sitesi yavaş bir internet bağlantısı olan küçük bir ekranda asla yüklenmeyecek veya doğru şekilde görüntülenmeyecekti. Mobil cihazlar için hızlı bir internet bağlantısının tanıtımı ile Duyarlı Web Tasarımı, web sitelerinin herhangi bir cihazda çalışabilen bir tasarım oluşturmasına olanak tanır. Ancak, web sitesi daha karmaşık hale geldiğinden ve sayfa yükleme süresi arttığından, hücresel keşif bozulur. Buna katkıda bulunan bir diğer faktör de, herkesin mobil cihazlarında çok fazla yüksek hızlı veriye sahip olmamasıdır.
Şu anda, basitleştirilmiş web sitelerinin hücresel olarak daha iyi ve daha hızlı yüklenmesi için birkaç rakip standart bulunmaktadır. Facebook’un yakın zamanda bir WordPress eklentisi olarak yayınlanan ve 10 Nisan’da tam olarak sunulacak kendi anında sayfa özellikleri var. Şahsen, bir Facebook cep telefonunda bir bağlantı açıp anında bir sayfada açtığımda hoşuma gidiyor. Bu, tam bir tarayıcıda açmaktan çok daha iyi ve daha hızlıdır. Bununla birlikte, siteyi daha hızlı yüklemek için açık kaynaklı bir girişim olan Google’ın hızlandırılmış hücresel sayfaları (AMP) şimdi kullanılabilir. AMP ile karşılaştırıldığında, anlık sayfalar site başına onay gerektirecektir.
Bununla birlikte, siteyi daha hızlı yüklemek için açık kaynaklı bir girişim olan Google’ın hızlandırılmış hücresel sayfaları (AMP) şimdi kullanılabilir. AMP ile karşılaştırıldığında, anlık sayfalar site başına onay gerektirecektir. AMP, hafif ve hücresel dostu bir sayfa için açık bir özelliktir. Sitenizde hücresel bir ekran olarak kullanabilir ve etkinleştirin, aslında sayfanızın AMP sürümünün Google tarafından arama için ve platformlarında başka bir yerde kullanılmasına izin verir. Buna ek olarak, birçok SEO uzmanı AMP’yi benimsemenizi önerir, çünkü Google bunu sıralama açısından yapanlara ödül verecektir. Son zamanlarda kişisel siteme AMP’yi uyguluyorum ve ilk izlenimimi ve yazdığım bazı kodları paylaşmak istiyorum. ayarlayın. İki eklenti yüklemek kadar kolay hazırlamak, ancak üst bıçakları ayarlamak ve bir sosyal paylaşım menüsü eklemek ve AMP ekranına bağlantı eklemek istiyorum. Ayarlar Sitenizde AMP almak için AMP eklentisini Automattic’ten yüklemeniz gerekir ve Yoast tarafından WordPress SEO kullanıyorsanız, AMP eklentilerini de yüklemeniz gerekir. Dürüst olmak gerekirse, bu noktada bitirebilirsiniz. Kalıcına “/ amp” eklediğinizde, Google Mucizevi bir şekilde AMP sürümünü buldu, çünkü eklenti “AMPHTML” meta etiketini, amp olmayan AMP sürümü ile amp olmayan sayfa başlığına ekledi.
Dediğim gibi, yaptığım bazı ayarlamalar göstereceğim. Bunu yapmadan önce, hücresel trafiğin yazınızın AMP versiyonuna otomatik olarak aktarılmayacağını belirtmek önemlidir. Bunun olmasını istiyorsanız, .htaccess dosyanıza yeniden yazma kuralları eklemeniz gerekir. CSS eklentisi AMP’nin ayarlanması, yazının minimum düzen ile iyi görünmesi için oldukça iyi bir CSS sağlar. Bu, WordPress.com’da beklediğiniz koyu maviyi kullanarak yazı bıçakları diyor. Kişisel sitem siyah beyaz bir tema kullanıyor ve çok renk değil, bu yüzden arka plan rengi olarak siyah rengi kullanarak üst bıçakları yapmak istiyorum. Özel bir CSS eklediğimde, sipariş edilen liste kurallarını ekledim çünkü ben Menü için bazı listeler yapacağımı ve sosyalimi paylaşacağımı biliyordum. CSS eklemek için “AMP_POST_TEMPLATE_CSS” filtresini kullanıyorum ve CSS’mi tekrarladım. İşte böyle görünüyor: add_action (‘amp_post_template_css’, işlev ($ amp_template) {
?>
nav.amp-wp-title-bar {arka plan: #000;}
ul.jp-amp listesi {
Liste Stili: Hayır;
Ekran: sırada;
}
ul.jp-amp listesi li {
Ekran: sırada;
Marj: 0 8 piksel;
}
<? Php
}); AMP eklentisi özel bir şablon kullanmanıza izin verse de, üstün görüntüler ekleyerek şablonun değiştirilmesi, bunu yapmıyorum çünkü şablona birkaç şey eklemek istiyorum. Eklediğim üç şey – üstün görüntüler, menüler ve sosyal bağlantılar – standart "the_concent" filtresini kullanılarak gerçekleştirildi, ancak AMP sayfasında yürümelerini istediğim için, bu filtreyi sadece AMP kullanıldığında ekledim. Bunu başarmak için, bu filtreyi "pre_amp_render_post" eylemine bağlı bir işleve koydum. Yapmak istediğim ilk şey üstün görüntüler eklemek. AMP hakkında dikkate alınması gereken önemli bir şey, standart görüntü etiketlerinin işe yaramamasıdır. Bunun yerine, özel resim etiketlerini kullanmalısınız. AMP eklentisi, üstün görüntüyü sizin için doğru işaretleme olarak otomatik olarak değiştirir. Üstün görüntüler ekleme şeklim budur:
Add_action ('pre_amp_render_post', function () {
add_filter ('content_konten', işlev ($ content) {
if (has_post_thumbnail ()) {
$ image = sprintf (‘
%s
‘, get_the_post_thumbnail ());
$ Content = $ Image. $ içerik;
}
$ Content iade;
}, 3);
}); Kancada çok düşük öncelikler kullandığımı ve mevcut içerikten önce üstün görüntüler koyduğumu unutmayın, bu da üstün görüntülerin gönderinin en üstünde olmasını sağlar. Gönderinin altına bir menü ve sosyal paylaşım bağlantısı eklemek için ters yaklaşımı kullanıyorum.
Hızlı yükleme menüsü, çok iyi bir yazı için minimum bir hücresel ekran ekleyin, ancak yan bıçaklar veya menüler olmadan, ziyaretçilerin tüm sitede gezinmeyeceğinden endişeliyim. Bu, sayfanın altına özel bir menü eklememi sağlıyor. Aşağıda, yaptığım özel amfi nasıl gösterdiğim kodun bir örneği var. Bu kod çok standarttır ve kullanmak için çok mümkün değildir. Dikkat edilmesi gereken önemli bir şey, get_permalink () yerine amp_get_permalink () işlevini kullanmam. Bunu yapmak mümkünse özel bir AMP bağlantısı sağlayacaktır – yani AMP’yi destekleyen sevkiyat türüne bağlantı, varsayılan olarak yalnızca bir gönderi veya varsayılan olarak.
add_filter (‘content_konten’, işlev ($ content) {
$ Menen_name = ‘amp’;
$ menü = wp_get_nav_menu_object ($ menü_name);
İf (! Boş ($ menü)) {
$ Menen_items = wp_get_nav_menu_items ($ menü-> term_id);
$ menü_list = sprintf (‘
menü:’, esc_attr (‘amp-jp-menu-‘. $ menü_name));
foreach ($ Menen_items AS $ Key => $ Menen_item) {
$ Menu_list. = Sprintf (‘
urlencode (get_permalink ($ post-> id),
‘Durum’ => urLencode ($ post-> post_title)
), ‘https: //twitter.com/share’);
$ facebook = add_query_arg (dizi (
‘U’ => urlencode (get_permalink ($ post-> id))
), ‘https://www.facebook.com/sharer/sharer.php’
);
}
$ share = sprintf (‘
paylaş:
. li>
<a href=" facebook'ta başlık="Barind Facebook
‘, esc_url_raw ($ twitter), esc_url_raw ($ facebook));
$ Content. = $ Share;
$ Content iade;
}, 1000);
});
