Mobil cihazlar için web sitesi uyarlaması, başarılı tanıtımın gerekli bir bileşenidir, çünkü çoğu kullanıcı rahatlığı sever. Son zamanlarda Google ve Yandex gibi arama motorları, mobil uyumlu olmayan sitelerin sürümlerini düşürmeye başladı. Sonuç olarak, web sitesi trafiği azalır. Bu nedenle, bu rakamı korumak için wordpress'in mobil versiyonuna ihtiyacınız var.

Başlangıç ​​​​olarak, sitenin mevcut görüntüsünü mobil cihazlarda analiz etmeye değer. Bunu yapmak için, Google'dan web yöneticisinin paneline gitmeniz yeterlidir. Burada eksiklikler hakkında detaylı bilgi edinebilir ve programlama bilgisi yardımıyla bunları düzeltebilirsiniz.

En iyi çözüm, temanızın CSS bölümüne aşağıdaki metni eklemektir:

#içerik (maksimum genişlik: 1280 piksel;)

Ek olarak, mobil versiyonun sayfalarının genişliğini değiştirmek istiyorsunuz ("width" özelliği bundan sorumludur). CSS bölümünde bulduğunuzda, değerini "%100" ile değiştirmeniz gerekecektir. Bu, tarayıcının sitenizi herhangi bir ekrana otomatik olarak sığdırmasını sağlar. Ancak sitenin yüklenmesi uzun zaman alacağı için bu uyarlama yönteminin etkili olmadığını belirtmekte fayda var. Mobil versiyonun ana hedefleri hızlı yükleme ve kolaylık sağlamaktır. Ayrıca bu tür bir adaptasyon hızlı değildir. Gerekli nitelikleri aramanız, herhangi bir kusur ortaya çıkarsa değerleriyle denemeniz vb.

Programlama bilginiz yoksa zamandan tasarruf etmenize ve mobil versiyonun indirilmesini hızlandırmanıza yardımcı olacak özel eklentiler yüklemelisiniz.

1. hamsi görüntülerin mobil cihazlarda orantılı olarak görüntülenmesi için gereklidir. Çalışma mekanizması, eklentinin standart görüntü çağrı etiketi img'yi şekil olarak değiştirmesidir. İstenirse, eklenti ayarlarında belirli bir sınıfa ait resimlerin görüntülenmesini devre dışı bırakma seçeneği vardır. Bu, haberleri ve diğer büyük portalları uyarlarken gereklidir. Aksi takdirde sitenin yüklenmesi çok daha uzun sürecektir.

2. Duyarlı Widget'lar yalnızca mobil cihazlarda görüntülenecek özel widget'lar yapmak için gerekli. Widget, herhangi bir bilgiyi (son veya popüler haberler, anketler vb.) içeren bir site bloğudur. Widget seçimi, çok işlevli bir web sitesi oluşturmak için yeterince geniştir.

3. Eklenti WP Işık Kutusu 2 bir mobil sitede pop-up'lar oluşturmaya yardımcı olacaktır. Aktivasyondan hemen sonra çalışmaya başlar. İsterseniz gösterinin süresini değiştirebilirsiniz. Genel olarak, kurulumla ilgili herhangi bir sorun olmamalıdır.

4. site uyarlamasını özelleştirmenizi çok daha kolay hale getirecektir. Etkinleştirdikten sonra, sitenin üst kısmında, mobil cihazın türüne bağlı olarak sitenin boyutunu ayarlayabileceğiniz bir panel görünecektir. Bu eklenti kullanışlıdır çünkü parametreleri değiştirdiğinizde sonucu hemen görebilirsiniz.

5. Birkaç dakika içinde hazır, duyarlı bir web sitesi oluşturmak istiyorsanız, bir eklenti kullanmalısınız. WP Dokunma... Oldukça popüler çünkü 5 milyondan fazla web yöneticisi kullanıyor. Bu eklenti temel ayarlar (ad, dil, bölge) ve bir tema içerir. Akıllı telefonlar için sitenin daha işlevsel bir mobil sürümünü yapmak istiyorsanız, WP Touch Pro'nun premium sürümünü satın almalısınız. Burada birçok farklı tema ve ek ayar var, bu yüzden siteniz monoton olmayacak.

6. WP Mobil Dedektör ziyaretçinin siteyi ziyaret ettiği cihazı belirlemek için tasarlanmıştır. Yaklaşık 5 bin farklı cihazı tanıyabilmektedir. Eklenti ayrıca benzersiz ziyaretler, yönlendirme kaynakları ve çok daha fazlasıyla ilgili istatistikleri de kaydeder.

7. Bu çok işlevli bir eklentidir. Bu sayede, çeşitli çubuk düğmelerinin (yer imlerine ekleme vb.), site sürümünü klasikten mobile değiştirmek için düğmelerin ve Google veya AdMob'dan gelen reklamlarla blokların görünümünü özelleştirebilirsiniz. Ayrıca site kontrol panelinin mobil sürümünü de içerir. Bu, rahatlığı önemli ölçüde artıracaktır, çünkü mobil cihazlarda çalışırken kontrol panelinin standart versiyonunda bazı seçenekler erişimde sınırlıdır.

8. Bu, öncekinin tam bir kopyasıdır. Yukarıdaki seçeneklere ek olarak, bu eklenti Disqus sistemini kullanarak gönderilere yorum yapma olanağı sağlar ve ayrıca mobil sürüm için ek bir XML haritası oluşturur.

9. Mobil cihazınız için hızlı ve dikkat çekici bir web sitesi oluşturmanıza yardımcı olacaktır. Resmi olanda önerilen tüm temalarla harika çalışıyor. Bu eklenti NY Times, Forbes ve diğer popüler sitelerin yaratıcıları tarafından kullanılmaktadır.

10. MobilBasın yeterince basittir. Bu eklenti, herhangi bir özel efekt olmadan pratik bir mobil sürüm oluşturacaktır. Bu eklentinin avantajı, sunucu üzerindeki yükü azaltmaktır. Bildiğiniz gibi sitede ne kadar az farklı widget varsa cihaz ekranına o kadar hızlı yüklenir.

11. WP Mobil Açılış Sayfası Düzenleyicisiİnternet portalınızın mobil versiyonu için bir misafir sayfası oluştururken sizin için faydalı olacaktır. Özelleştirmesi oldukça kolaydır ve çok çeşitli farklı stiller içerir. Doğru tasarım seçimi ile site trafiğini artırabilirsiniz. Bu eklentinin herhangi bir taşınabilir cihazda sayfaların hızlı yüklenmesini sağladığını da belirtmekte fayda var.

12. Kullanırken Wapple Mimar Mobil klasik sürümle aynı URL'ye sahip olacak uyarlanmış bir sürüm alacaksınız. Yani, "m.site.com" gibi bir alt etki alanına yönlendirme olmayacak. Bu, SEO metriklerini hiçbir şekilde etkilemez. Bu eklentinin bir özelliği de, herhangi bir temayı kesinlikle mobil cihazlara uyarlama yeteneğidir (çok sayıda farklı widget içeren bir tema olsa bile). Bu sayede tasarımla uğraşmak için fazladan zaman harcamanıza gerek kalmaz.

Eklenti kullanmadan adaptasyon nasıl yapılır?

Eklenti kullanmak istemiyorsanız, herhangi bir cihaz için mobil sürüm oluşturabileceğiniz özel hizmetler vardır.

dudamobile.com hizmeti oldukça popüler çünkü çok çeşitli seçeneklere sahip. Ancak bu hizmet ücretlidir. Fiyat 9 dolar olacak. Bu, herhangi bir eklenti kullanmanız gerekmediğini göz önünde bulundurarak ödemek için iyi bir fiyat.

Başlamak için buradan kaydolmanız veya Facebook üzerinden yetkilendirme yapmanız gerekir. Bundan sonra, "Tasarım" bölümüne gidin ve "Düzen" alanına tıklayın. Size olası navigasyon yerleştirme seçenekleri sunulacaktır. Seçmek için beğendiğiniz seçeneğe tıklamanız yeterlidir. Renkleri özelleştirmek için "Stil" alanına tıklamanız gerekir. Ayrıca kendi arka plan resminizi de yükleyebilirsiniz. "Başlık" alanı logodan sorumludur. Bir resim olarak indirebilir veya bir metinle sunabilirsiniz. Genel olarak tasarım süreci görsel olarak gerçekleşir. "Yapılandırırsınız" ve hizmet özel bir kod oluşturur. Ayrıca ücretsiz bir sürümü olduğunu da söylemek gerekiyor. Ancak bu durumda site otomatik olarak reklam gösterecektir.

Daha basit olanı, önemli ölçüde daha az seçenek içeren mippin.com'dur. Çalışma mekanizması önceki hizmete benzer.

Adaptasyon kontrolü

Yapılan işlemlerden sonra istenen sonucu almalısınız. Ancak bir mobil cihaza uyarlamanın doğru yapıldığından emin olmak için aşağıdaki servisleri kullanmalısınız.

Her şeyden önce, Google web yöneticisi paneline geri dönmeli ve mobil sürümünüzün performansını yüzde kaç tahmin ettiğini görmelisiniz. %100 değeriniz varsa, hedefe tam olarak ulaşılır. Siteniz sıralamalarda yükselecek ve iyi bir trafiğe sahip olacaktır. Değer yüzde birkaç daha az ise, bu önemli bir sorun olmayacaktır. Sonuç tatmin edici değilse, uyarlama yöntemini tekrar gözden geçirmelisiniz. Kalıplar, nasıl uyarlanacağını seçmede önemli bir rol oynar. Eklentiler şablonunuzla iyi çalışıyorsa, bu bir sorun olmamalıdır. Aksi takdirde, yüklü şablonları devre dışı bırakmanız ve ücretli bir hizmet kullanmanız istenecektir. Gerekirse, bir uzmanla iletişime geçmeli veya daha basit bir şablon yüklemelisiniz.

iPad Peek hizmetinin yardımıyla, mobil sürümünüzün görüntüleme özelliklerini iPad, iPhone ve Apple'ın diğer gadget'ları gibi cihazlarda görmek için tamamen ücretsiz olabilirsiniz. Bu hizmet popüler çünkü İnternet kullanıcılarının çoğunluğu Apple cihazlarını tercih ediyor.

Mobil sürümünüzün ekranını yalnızca Apple ürünlerinde değil, Samsung, HTC ve BlackBerry ürünlerinde de görmenizi sağlayan Cep Telefonu Emülatörü hizmetini de kullanabilirsiniz.

Ekran sineği popülerdir. Bu hizmet sayesinde sitenizin sadece telefonlarda değil, TV'lerde, çeşitli dizüstü bilgisayarlarda, tabletlerde ve diğer cihazlarda nasıl görüntülendiğini kolayca öğrenebilirsiniz. Dilerseniz kendi parametrelerinizi ayarlayabilir ve performansı görebilirsiniz.

Herhangi bir siteyi tekrar ziyaret etmek istemiyorsanız, Opera Mobile Emulator'ı bir kez yükleyin. Bu, iyi bilinen Opera tarayıcısının bir eklentisidir. Ücretsizdir ve kullanımı kolaydır.

Sergey Arsentiev

10 dakikada bir WordPress sitesinin mobil sürümünü oluşturma

Google kısa süre önce mobil sürümü olan sitelerin sıralamasında bir öncelik olduğunu duyurdu. Bu sadece bir anlama gelebilir: Mobil cihazlar çağının başlangıcı gerçekleşti. Ve bu nedenle, kendine saygı duyan her WordPress sitesi veya blogunun artık yalnızca bir mobil sürüme sahip olması gerekiyor.

Sitenin mobil versiyonu, birçok site sahibi (ve dürüst olmak gerekirse ben) bunu yapmak için zaman ve özel nedenler bulamadı.

Ancak, Google'ın ciddi olarak mobil desteği almasından bu yana bu durum değişti. Google, uzun bir süre web yöneticilerini aşağıdaki mesajlarla "korkuttu":

Sitenizin 27 sayfasını inceledik ve bunların %100'ünün mobil cihazlarda görüntülenmesinin sakıncalı olduğunu gördük. Bu 27 sayfadaki hatalar, kullanıcılara kaynak hakkında kötü bir izlenim verir. Bu sayfalar, Google Arama açısından mobil cihazlar için optimize edilmiş sayılmaz ve akıllı telefon arama sonuçlarında buna göre görünecek ve sıralanacaktır.

Kontrol edilen sayfa sayısı ve tutarsızlık yüzdesi farklı olabilir, ancak sonuç şuydu: Google, kendi görüşüne göre sitede bir sorun olduğu konusunda uyardı.

Ve şimdi şirketin temsilcileri resmen açıkladı 21 Nisan 2015'ten itibaren öncelikli destek sitenin mobil versiyonuna sahip olacak projeler. Bunun anlamı ne? Evet, mobil versiyonu olmayan bir sitenin, telefon ve tablet kullanıcılarıyla ilgilenen bir siteden daha kötü sıralanacağı gerçeği.

Kontrolün sonucu şu şekilde olmalıdır:

Benzer şekilde, sitenin mobil sürümünü Yandex web yöneticisi panelinde kontrol edin: https://webmaster.yandex.ru/site/

Test sonuçları, kırmızı açıklamalar olmadan tamamen yeşil olmalıdır.

Bu arada, Google aracında kontrolü geçen, ancak Yandex'de olmayan bir SEO müşterimin sitesi var! Bu yüzden hem orayı hem de orayı kontrol ettiğinizden emin olun.

Ve sayfanız bir veya daha fazla arama motorunda mobil cihazlar için optimize edilmemişse, bunu hemen şimdi yapmanın zamanı gelmiştir.

Önemli! Halihazırda bir mobil sürüm oluşturmuş olabilirsiniz, ancak Robots.txt dosyasındaki hizmet klasörlerini indekslemesini yasakladığınız için bunu yalnızca Google ve Yandex anlamayabilir.

Mobil cihazlar zaten norm haline geldi: biri telefondan, biri tabletten veya netbook'tan çevrimiçi oluyor. Bu nedenle, bu tür ziyaretçileri görmezden gelmek artık kabul edilemez.

Yani, en azından Google ve Yandex düşünüyor, bu da mobil versiyonun standart hale geldiği anlamına geliyor. Ancak bu, sitenin veya blogun "küçük" sürümünü kullanmaktan elde ettiğiniz tüm güzelliklerden uzaktır.

Bir mobil sitenin elde ettiği avantajların kaba bir listesi:

• Google ve Yandex'de öncelik (evet, evet, Yandex şimdi Web Yöneticisi panelinin yeni arayüzündeki mobil sürümü de analiz ediyor, Yandex'den bir güncelleme büyük olasılıkla hemen köşede)
• davranışsal faktörlerin iyileştirilmesi: Sonuçta, ziyaretçiler mobil versiyonu olan bir sitede bir mobil cihazdan daha rahat çalışırlar, bu nedenle bu tür sitelerde daha fazla zaman harcarlar, daha fazla sayfa açarlar ve daha kolay bilgi alırlar, hemen çıkma oranlarını düşürürler ve davranışsal faktörleri iyileştirirler. ayrıca aramadaki durumu da etkiler.
• yükleme hızı: mobil sürümde, sitenin mümkün olduğunca çabuk yüklenmesi için kural olarak gereksiz ikincil ayrıntılar atılır - bu aynı zamanda davranış faktörlerini ve site istatistiklerini de iyileştirir.
• dönüşümlerde artış: kullanıcı dostu bir sitede, insanlar istenen hedeflere daha hızlı ve daha tutarlı bir şekilde ulaşır (bir ürünü sepete koyun, abone olun, kayıtlı üye olun, bir blog yazısını okuyun, bir reklama tıklayın, vb.) .
• sağlamlık: mobil versiyonu olan kurumsal web siteleri, şirketlerine küçük bir ek olumlu imaj verir.
• kullanıcı tutumu: kullanıcılar iyi şeylere daha çabuk alışırlar, bu nedenle mobil versiyonu olan bloglar ve web sitelerinin daha az gelişmiş rakiplerine göre kalıcı ve sadık bir kitle kazanma olasılığı daha yüksektir.

Bu nedenle, avantajlar listesi, sitenin mobil sürümünü gecikmeden yüklemek için yeterince büyüktür.

Ama bunu nasıl yapmalı?
Gerçekten her şeyi yeniden yazmanız ve bunun için binlerce ruble ödemeniz mi gerekiyor? Siteniz WordPress CMS üzerine kuruluysa, her şey hızlı ve ücretsiz olarak yapılabilir.

WordPress: 5-10 Dakikada Mobil Site!

Bir keresinde hangisini yazdığımı hatırlıyor musun? Bu tavsiyeye uyduysanız veya kendiniz doğru seçimi yaptıysanız ve WordPress'e yerleştiyseniz, gelişmiş topluluk sayesinde, siteniz için anında ve otomatik olarak bir mobil sürüm oluşturacak mükemmel bir eklentinin ücretsiz sürümünü kullanabilirsiniz.

Şimdi yapmanız gerekenler:

Kurulumdan sonra sol menüden eklenti ayarlarına erişebileceksiniz. Bu tür öğeler vardır: temel ayarlar, temalar ve uzantılar, tema ve menü seçenekleri. Her şeye daha yakından bakalım.

Temel ayarlar

Site adı ve yazarı
Mobil versiyonda sitenizin üst kısmına ne yazılacak. Yaklaşık olarak bu miktar tamamen uyduğundan, tam anlamıyla 20 karakter uzunluğunda kısa bir şey kullanmanızı öneririm. "" onay kutusu kaldırılabilir.

Bölgenin tanımı.
Rus çoğu durumda yapacak.

Başlangıç ​​sayfası.
Mobil cihazlar için manuel olarak ayrı bir ana sayfa ayarlayabilirsiniz (örneğin, boyut olarak daha küçük veya farklı metin içeren). Çok uygun, ancak her şeyi varsayılan olarak bıraktım.

Parametrelerin geri kalanına dokunmanın pek bir anlamı görmüyorum, özellikle de en ilginçleri eklentinin tam ücretli sürümünde mevcut olduğundan.

Tema Seçenekleri: Genel

Mobil eklentinin ücretsiz sürümünde yalnızca bir tema bulunacaktır, bu nedenle doğrudan birkaç sekmesi olan parametrelerine gidin.

"Genel" sekmesi, aşağıdaki gibi parametreleri ayarlamanıza olanak tanır:

Blog.
Blog listesindeki giriş sayısı. Ayrıca kategorileri ve etiketleri hariç tutabilirsiniz (yani, mobil sürümdeki tüm gönderileri görüntülemez). Her şeyi çıkarıyorum, bence mantıklı.

Girişlerin eskizlerini şöyle koyuyorum: Her şey (blog, ayrı, sayfalar, arama ve arşiv).
Bu durumda, her gönderi için çevrelerdeki minyatürler sıkıldı - güzel.

Bakın, ilk durumda - eskizlerle, ikincisinde - olmadan.

Özellikle az yer kapladığından eskizleri daha çok sevdim.

Gönderi kategorilerini ve etiketlerini göster - Evet.
Yayın tarihini göster - Evet.
Gönderi yazarını göster - Numara(bana abartı geliyor)
Yayınlara yorum yapan çevreleri göster - Evet
Aramayı üst bilgi ve alt bilgide göster - Evet.

Sayfalar
Yorumlarım sayfalarda görüntülenmiyor, bu yüzden görüntülenmiyor

Özel gönderiler için destek
Sahip olduğum tüm türler için destek ekledim:

wpcf7_contact_form'u etkinleştirin (iletişim formu eklentisi)
İkilemi etkinleştir (evet / hayır oyu verin)
Sosyal dolabı etkinleştir ()
Wysijap'ı etkinleştirin (e-posta abonelik eklentisi)

Kayıt formu
Blogumda kayıt seçeneği olmadığı için eklemedim.

Hazır kaydırıcı
Konumda, bu kaydırıcıları nerede gösterebileceklerini bulamadım. Ama açarsam diye, bırak olsun.

Tema Seçenekleri: "Markalaşma"

Dikkatlice kazılacak yer burası. Sitenin mobil versiyonunun görünümünün tasarlandığı yer burasıdır.

Site renkleri
Burası sitenin mobil versiyonunun renklerinin yapılandırıldığı yer, bu yüzden tavsiye ederim

site logosu
Bu logo. Site logosunu ayarlarsanız, ad yerine gösterilir. Yukarıda yazdığım bu isim kısa olduğu için logoyu kullanmayı daha çok sevdim.

Konu notu.
Mobil sürümden normal sürüme geçmek için düğmelerin altında görüntülenecek olan rastgele kod. Hayal gücünüze bağlı. Bu alanı henüz kullanmadım.

kayıt
En sevdiğiniz yazı tiplerini seçin. "Tarayıcı Yazı Tipleri" koydum. Teorik olarak, daha hızlı yüklenmelidir.

Genel erişim.
"Paylaşım bağlantılarını göster" ve "Sayfalarda paylaşılan bağlantıları göster" onay kutularını ayarlayın, bu, mobil sürümde Facebook, Twitter, Google+ sosyal ağlarındaki gönderi bağlantılarının içinde gösterilecek ve bağlantıyı e-posta ile gönderiye gönderecektir. Rahat ve güzel.

Sosyal bağlantılar notları
Sosyal kişilerinize, gruplarınıza ve RSS'nize bağlantılar girin. Ardından, tüm mobil sayfaların altında, belirli sosyal hizmetleri etkinleştirmenin mümkün olacağı sevimli yuvarlak simgeler görünecektir.

Tema seçenekleri: "Simge yer imi".

Bu, kullanıcıların mobil cihazlarında sitenize bir bağlantı kaydetmesi durumunda kullanılacak olan iPhone veya Android için bir düğmedir.

Temel olarak bir iPhone simgesinin PSD maketini aldım ve Photoshop'ta istediğim düğmeyi hızla oluşturdum.

Henüz bu düzenleyiciyle arkadaş değilseniz, bu hizmette Apple için ücretsiz bir simge oluşturabilirsiniz.

Menü

Bu en önemli öğe, sağ simge kullanılarak gerçekleştirilen menünün görüntüsünü özelleştirmenize olanak tanır.

Burada her şey basit: önceden yüklenmiş simgeleri (en kolay yol) seçebilir veya simgelerinizi şeffaf bir arka plana yükleyebilir ve zaten ekleyebilirsiniz.

Önemli! Ekleme sırasında, başarılı bir indirme hakkında hiçbir bildirim gelmez, bu nedenle ihtiyacınız olduğu kadar yükleyin ve ardından Menü Simgeleri'ne gidin ve "Özel Simgeler" simge setini seçin - önceden yüklenmiş simgeler olacaktır.

İşte nasıl kurdum:

Bu arada, eklenti paketindeki önceden yüklenmiş simgeler iyi seçilmiştir ve çoğu projeye uyacaktır.

Telefonun kendisi olmadan iPhone5'te mobil cihazlar için sitenin ortaya çıkan sürümünü kontrol edebileceğinizi biliyor muydunuz? Bunu yapmak için, örneğin iphone5simulator.com gibi "iPhone Emulator" hizmetini kullanabilirsiniz.

Sonuçlar ve özetler

Böylece, kelimenin tam anlamıyla birkaç dakika içinde ve en önemlisi, WordPress altındaki bir web sitesinde veya blogda sitenin mobil sürümünü oluşturmak ücretsizdir.

Bu, henüz bu kadar basit ve kullanışlı eklentilere sahip olmayan ve mobil cihazlar için bir sürüm oluşturmak için bir düzen tasarımcısını dahil etmeniz gereken diğer birçok CMS'ye göre büyük bir rekabet avantajıdır ve bu zevk nadiren 100 dolardan daha ucuza mal olur.

Google temsilcilerinin açıklamalarına göre, 21 Nisan 2015'ten itibaren mobil versiyonun kullanımı, projenin web'de başarılı bir şekilde tanıtılması için fiili standart haline gelecek. Bu nedenle, özellikle sadece birkaç dakika sürdüğü için gecikmeden kendinize bir mobil sürüm yapmanızı öneririm (bu yazıyı eklentiyi kurduğumdan daha uzun yazdım).

Yandex, Ağustos 2016'dan beri artık webmaster panelinde mobil versiyonu da tanımlıyor, bu arama motorunun da mobil versiyonu olan siteler için aramada öncelik vereceği aşikar.

selam arkadaşlar. 2 Şubat'ta Yandex, web yöneticileri için blogunda mobil aramadaki siteleri sıralamak için yeni bir algoritma olan Vladivostok'u duyurdu. Özü, telefonlardan yapılan sorgular için, sitenin akıllı telefonların küçük ekranlarında görüntülenecek şekilde uyarlanabilirliği dikkate alınarak arama sonuçlarının oluşturulacağı gerçeğine dayanmaktadır.

Önceden, bu faktör dikkate alınmıyordu, ancak önceden acele eden kişi şimdi kazanan olacak - aramada daha yüksek olacak, daha fazla trafik alacak ve daha fazla para kazanacaklar. Daha fazla haber için buraya bakın. Google benzer bir tekniği daha önce kullanmaya başladı.

Bahsettiğim yeni Yandex Web Yöneticisi, siteyi hareketlilik açısından kontrol etme işlevine sahip. Yardımı ile kaynağınızı kontrol edebilir ve elde edilen sonuçlara göre herhangi bir işlem yapabilirsiniz.

Bugün WordPress blogları ve sıradan ağ çalışanları olarak yeni koşullara nasıl uyum sağladığımız hakkında konuşacağız.

Öncelikle, kaynağınızı mobil aramaya uyarlamanın 3 yolu olduğunu anlamanız gerekir:

1. Bir alt etki alanında veya başka bir etki alanında sitenin ayrı bir mobil sürümünün oluşturulması.
2. Küçük ekranlarda açıldığında öğeleri otomatik olarak yeniden boyutlandıran ve konumlandıran duyarlı bir WordPress teması kullanma.
3. Cihaza bağlı olarak farklı temaların uygulanması - bilgisayarda bir şablon, telefon için bir başka (daha basit ve daha kompakt) şablon olacaktır.

İlk vakadan bahsetmek istemiyorum çünkü etkisiz olduğu için aslında ayrı bir site yapıyorsunuz ama kalan 2 tanesi bloggerların kullanımına açık.

Duyarlı WordPress temaları

Blogunuz için "kıyafetlere" henüz karar vermediyseniz ve bununla ilgili derse yaklaşıyorsanız, arama yaparken orijinal olarak uyarlanabilir olarak tasarlananlara bakın. Bu durumda, gelecekte herhangi bir sorunla karşılaşmazsınız.

Ücretli şablonlar sipariş ederken de aynı şekilde ilerleyin - referans şartlarında mobil cihazlar için zorunlu uyarlamayı belirtin.

Sitenin mobil versiyonu için WordPress eklentileri

Şimdi, blogunuzun zaten bir şablonu olduğu ve onu değiştirmek istemediğiniz, ancak mobil trafik için tasarlanmadığı bir duruma geçelim. Ne yazık ki, başlangıçta akıllı telefonlar için uygun olmayan bir temayı uyarlamak kolay bir iş değil ve bunu dizlerinizin üzerinde yapamayacaksınız. Sorun, eklentileri kullanarak bir WordPress sitesinin mobil sürümünü oluşturarak çözülür. Bu yöntem ücretsiz ve uygulaması kolaydır.

Eklentiler şu şekilde çalışır - Site, görüntülemenin hangi cihazı izlediğini otomatik olarak algılar ve buna bağlı olarak farklı şablonlar içerir - normal veya özel bir mobil şablon.

Eklentileri yüklemek kolaydır ve acemi bir web yöneticisi bile bunu halledebilir. Eklentilerin nasıl kurulacağını görün.

Aşağıda listeleyeceğim tüm eklentiler WordPress dizinindedir ve direkt olarak admin paneli üzerinden kurulurlar.

1.WPtouch Mobil Eklentisi

Tanıştığım sitenin mobil versiyonu için ilk eklenti, aynı zamanda en ünlüsü. Web sitemdeki bir çalışma örneği DmitriyZhilin.ru

Ücretsiz sürümde yalnızca bir şablon içerir, ancak bunu özelleştirebilirsiniz - yazı tiplerinin, arka planların, düğmelerin vb. renklerini değiştirin. Altbilgiye kendi kodunuzu ve ek CSS stillerini doğrudan ayarlar panelinden eklemek mümkündür.

Eklenti Rusça çalışıyor, ancak çeviri şu anda biraz beceriksiz, ancak her şey açık.

Renk ayarına ek olarak, eklentinin uygulanacağı cihazları belirtmek mümkündür - "elmalar", "androidler", "pencere arka planları" vb.

2. WordPress Mobil Paketi

Önceki sürüm gibi, bir ücretsiz teması var ve geri kalanı PRO sürümü satın aldıktan sonra açılıyor.

Mobil sürüm için özel bir logo eklemek, standart renkleri değiştirmek, görüntülenen kategori ve sayfaların bir listesini seçmek mümkündür.

WordPress Mobile Pack eklentisinin yönetimi ve ayarları İngilizce'dir, ancak her şey sezgiseldir, özellikle aktivasyondan hemen sonra her şey çalışmaya başladığından ve daha fazlasını yapamazsınız.

Sevmediğim şey ana sayfaydı, son makalenin adını gösteriyor ve o kadar; diğer yazılara ve kategorilere gitmek için siteyi kaydırmanız gerekiyor, ancak ana sayfanın neredeyse tüm ekranı boş .

Neredeyse unutuyordum - hostinginizin en az 5.3.0 PHP sürümüne ihtiyacınız var

3. Mobil Akıllı Eklenti

Çok ilginç bir seçenek. Önceki eklentilerin aksine, bu eklenti önceden yüklenmiş mobil temalarla gelmiyor, bir geçiş anahtarı görevi görüyor.

Yani, onu kurun ve ana ayarlar sayfasında mobil kullanıcılara gösterilecek WordPress temasını belirtin - tema, bulduğunuz ve siteye yüklediğiniz temalardan herhangi biri olabilir.

Site için (başta bahsettiğim) duyarlı bir temaya ihtiyacımız var. Ama işin püf noktası şu ki, bu uyarlanabilir tema her zaman çalışmıyor, yalnızca telefon kullanıcıları için, diğer tüm ziyaretçilere diğer tüm ziyaretçilere normal şablonunuz (uyarlanabilir değil) veriliyor.

4. WP Mobil Sürümü

Denediğim pek çok şey arasında bu mobil WordPress eklentisi benim favorim. Minimum ayar ile en uygun mobil şablonu içerir:

• Minimalist tasarım (Google'dan PageSpeed ​​Insights'ta maksimum hız ve yanıt verme özelliği gösterildi)
• küçük ekranlar için özel olarak uyarlanmış kullanışlı menü,
• en son makaleler ile uygun ana sayfa,
• mobil sürümden normal bir temaya geçiş için bir düğme ve normal bir sürümden mobil sürüme geçiş için bir düğme yerleştirmek için bir kısa kod (yukarıda tartışılanlarda durum böyle değildi).

Eklenti Rusça ve çeviri iyi. Her ne kadar buna gerek yok, çünkü aktivasyondan sonra herhangi bir ayar yapmadım.

Tasarımın kendisi hala bir, ancak birkaç renk şeması içeriyor.

Tek olumsuz, temanın gönderilerin küçük resimlerini göstermesi ve bende olmadığı için başlıkların karşısında boş kareler var (ekranda görebilirsiniz). Sitenin görünümünü gerçekten bozmuyorlar, ancak küçük resimlerin görüntülenmesini devre dışı bırakmanın bir yolu yok - üzücü.

Hangi eklentiyi seçmelisiniz?

Son olarak, projeniz için en uygun eklentiyi seçme ile ilgili soruya cevap vereceğim. Tek bir doğru çözüm yoktur. Sunduğum seçeneklerin her birini denemenizi tavsiye ederim.

İlk olarak, mobil temalara sahip eklentileri deneyin - 1, 2, 4. Hiçbiri size uymuyorsa, duyarlı tasarıma sahip iyi bir tema arayın ve Mobil Akıllı eklenti (3) ile mobil kullanıcılar için bağlayın, herhangi bir kısıtlama yoktur. burada - herhangi bir şablonu kullanabilirsiniz.

Önbelleğe almayı unutmayın

Sitede önbelleğe alma eklentileri kullanıyorsanız (ve bunları kullanmanız gerekiyorsa), kullanıcıların önbelleğe kaydedilmiş ve CMS tarafından oluşturulmamış sayfaları gördüğünü, bu nedenle uygun ayarlar olmadan sayfaların birbirinden ayrılmayacağını unutmayın. mobil ve sabit ziyaretçiler için - önbellekten aynı sayfadan gelecektir.

Ayarları özel bir “Mobil” sekmesine sahip olan Hyper Cache eklentisi ve içinde önbelleğin bilgisayarlar için ayrı ve telefonlar için ayrı olarak depolanması gerektiğini belirtmeniz gerekir. Aynı yazıda bu ayardan bahsetmiştim. Diğer önbelleğe alma eklentileri de benzer ayarlara sahip olmalıdır, onlar olmadan mobil tema yapmanın bir anlamı yoktur.

Faydalı makaleler:

• 
  Bir Acemi İçin İnternetten Nasıl Para Kazanılır - 23 ...
• 
  Blog nedir, nasıl oluşturulur, tanıtılır ve nasıl ...

Merhaba sevgili okuyucular!

Bu hafta blogumda iki harika şey oldu! İlk olarak, ziyaretçi sonunda 1000'i geçti (Salı günü 1040 benzersiz ziyaretçi vardı). İkincisi, kenar çubuğuna yükledim. Reklam biriminin görünümüyle ilgili yorumlarınızı bekliyorum. Ve tıklamalar için son derece minnettar olacağım :)

Bu arada, Google kısa süre önce blogumun mobil cihazlarda iyi görüntülenmediğini duyurdu. İnternette, 21 Nisan 2015'ten itibaren cep telefonları için uyarlanmayan tüm sitelerin eski sürüme geçirileceğine dair mesajlarından dolayı çok fazla gürültü yaşandı.

Soru ortaya çıktı: Sitenin mobil versiyonuna ihtiyacınız var mı? Geçen ayki istatistiklere bakılırsa, göz atarken cep telefonlarını veya tabletlerini kullanan 1500'den fazla ziyaretçim var. Bu, günde yaklaşık 50 kişi demek ki o kadar da küçük değil. Ve her yıl mobil teknolojilerin hayatımıza sizinle birlikte daha fazla girdiğini düşünüyorsanız, çağa ayak uydurmayı da düşünmeniz gerekiyor. Bu makalede, bir WordPress blogu için mobil sürüm oluşturma konusunda size yol göstereceğiz.

Sitenin mobil versiyonu nasıl kontrol edilir?

Yapılacak ilk şey, kaynaklarınızı Google'ın gereksinimlerine göre kontrol etmektir. Herkes siteyi mobil cihazlarda görüntülemenin rahatlığını burada analiz edebilir - google.com/webmasters/tools/mobil uyumlu.

İşte aldıklarım:

Bir sitenin farklı sürümlerinin yükleme hızını kontrol etmek için başka bir yararlı Google hizmeti: geliştiriciler.google.com/speed/pagespeed/insights... Sitenizde tam olarak neyin yanlış olduğunu ayrıntılı olarak açıklar, blogunuzun ekran görüntüleriyle belirli örnekler verilir. Bu nedenle, html + css bilgisine sahip olarak ve bu talimatı kullanarak kaynağınızı mükemmel bir şekilde değiştirebilirsiniz.

Google'da sitenin mobil sürümünü kontrol ederken, siteyi mobil cihazlar için WordPress'e uyarlama önerileri içeren bağlantıyı takip edebilirsiniz (sağdan üçüncü sütun - "İleri"). Eklentiler, duyarlı şablonlara bağlantılar ve daha fazlasını içeren başka bir ayrıntılı WordPress kılavuzu var. Ayrıca bu belgeyi incelemenizi tavsiye ederim.

Duyarlı WordPress temalarının, orijinal olarak farklı cihaz türleri tarafından tanınmak üzere tasarlanmış temalar olduğunu hatırlatmama izin verin. Makalede dikkat etmeye değer ana kriterleri analiz ettik. Bunlar arasında uyarlanabilirlik vardı.

Google desteğin bize söylediği gibi, bu tür konuların açıklamalarında genellikle responsive (uyarlanabilir) veya mobil (mobil) kelimeleri bulunur. Onlar. blogunuz için duyarlı bir tema seçtiyseniz, sitenin mobil sürümü için nasıl şablon oluşturacağınızla uğraşmanıza gerek yok. Ana şablonunuz, mobil cihazınıza uyacak şekilde otomatik olarak ayarlanacaktır. Pekala, uzun zaman önce, henüz böyle bir konu yokken bloglarını oluşturanlar ve yerleşik şablonlarını değiştirmek istemeyenler için bu incelemeye devam edeceğiz. Ve sitenizin cep telefonlarında ve tabletlerde iyi bir şekilde alınması için yapılması gerekenleri analiz edeceğiz.

WordPress blogu için mobil sürüm: özellikler

Duyarlı bir tema veya dosyaların doğrudan düzenlenmesi dışındaki tüm diğer seçeneklerin, sitenin mobil sürümü için ek bir WordPress şablonu oluşturulmasını içerdiğini anlamalısınız. Bu şablon, mobil cihazların özelliklerini dikkate alarak ana şablondan farklı olmalıdır:

• Küçük ekran boyutu;
• Daha düşük indirme hızı;
• Klavye ve fare eksikliği.

Kısacası, sitenin bu versiyonu basitleştirilmelidir. Yalnızca ihtiyacınız olan her şeyi, hızlı ve verimli bir şekilde yüklenecek içeriği göstermelidir.

Bu işlevleri uygulamanın birkaç yolu vardır. En kolayı eklentileri kullanmaktır (yeni başlayanlar için ideal).

Site uyarlama eklentileri

En yaygın eklentiler: WPTouch Mobil Eklentisi, WP Mobil Dedektörü, MobilePress, WPSmart Mobile.

WpTouch ve MobilePress, daha fazla özelleştirme ve işlevsellik ile daha gelişmiş sürümlere yükseltilebilen eklentilerin temel ücretsiz sürümleridir. Kullanıcı incelemelerine göre, WpTouch Pro oldukça ağırdır ve önbelleğe alma eklentileri () ile çakışabilir. Bir mobil kullanıcıya önbellekten bir PC için bir sayfa sunulabilir. Bu, mobil siteler için diğer WordPress eklentilerinde de olabilir. Hem MobilePress hem de WPTouch'ın temel sürümleri, basit yapısı ve içeriği olan bloglar için kullanılabilir.

Ama WPSmart Mobile eklentisini daha çok beğendim. Tek seferde seçebileceğiniz üç WordPress mobil şablonu vardır.

Doğru, tüm ayarları İngilizce, ancak orada karmaşık bir şey yok.

Burada logoyu, yorum yapma yeteneğini ayarlayabilir, sitede arama yapabilir ve gönderilerin görüntüsünü özelleştirebilirsiniz. Ek olarak, kod veya başka herhangi bir istatistik sayacı yükleyebilirsiniz. Ayrıca "Görünüm" bölümünde, girişlerin yazı tipini ve rengini, arka plan rengini vb. değiştirebilirsiniz. Elbette bu artık siteniz normal haliyle kalmayacak, içerik farklı bir görünüme kavuşacak ancak mobil kullanıcılar için kullanışlı hale gelecek.

"Önizleme"yi tıklayarak sitenin bir mobil cihazda nasıl görüneceğini görebilirsiniz:

Beğendiğiniz herhangi bir mobil WordPress eklentisini yükledikten sonra, ziyaretçinin hangi cihazı kullandığını otomatik olarak algılamalı ve onlara sitenin uygun sürümünü sunmalıdır.

Sitenin mobil sürümünün görüntülenmesi veya herhangi bir tarayıcı veya cihazda görüntülenmesi, özel bir User-Agent Switcher uzantısı kullanılarak yapılabilir. Google Chrome mağazasında şöyle görünür:

Sayfa görüntüleme türünü doğrudan Chrome'da değiştirmenize olanak tanır:

Buna göre, blogunuzun tarayıcılar arası uyumluluğunu ve iPhone'dan Samsung Galaxy'ye kadar farklı cihazlarda görünümünü kontrol edebilirsiniz.

WordPress'te bir web sitesinin mobil sürümünü oluşturmak için diğer seçenekler

Eklenti kullanmadan seçenekler:

• özel servisler kullanarak.
• bir alt etki alanında bir mobil sürüm oluşturma;
• mobil sürüm için ayrı bir CSS stil sayfası oluşturma;
• tüm görüntüleme seçenekleri için verileri tek bir CSS dosyasına kaydedin;

İşte web sitenizi analiz eden ve mobil versiyonunu oluşturan hizmetlerden biri - dudamobile.com. Ardından bloga sitenin mobil versiyonuna yönlendirme yapacak bir kod koymanız gerekiyor. Bu aracın birçok ayarı vardır, ancak işlevselliği serbest modda kesilir.

Alt alanlar benzer şekilde kullanılır. Bunları ağır, çok işlevli siteler için oluşturmak mantıklıdır. Bunun nasıl çalıştığını, sitenin mobil versiyonuna yönlendirmenin yapıldığı youtube örneğinde görebilirsiniz. Burada ana alan youtube.com'dur ve mobil cihazlar için - m.youtube.com. Vkontakte aynı şekilde çalışır.

Ek bir stil dosyası oluşturmaya karar verirseniz, ana dosyanın bir kopyasını oluşturun ve örneğin style-m.css olarak adlandırın. Şimdi header.php dosyasında, stillerin bağlı olduğu satırlarda değişiklik yapmanız gerekiyor.

Örneğin, şöyle görünebilirler:

" /> /style-m.css "/>

Ardından CSS alanında bilginiz varsa doğrudan style-m.css dosyasında düzenlemeler yapabilirsiniz. Örneğin, yazı tiplerini daha zıt olanlarla değiştirin, görüntüyü tek sütun yapın ve Google'ın önerdiği her şeyi yapın.

Bu yöntemi kendim seçtim, birkaç stil not aldım ve Google işi kabul etti. Çok seçici olmadığı ortaya çıktı, içeriği dar bir sütuna yerleştirmek yeterli ve Google hizmeti mutlu bir şekilde bilgilendiriyor: "İyi! Sayfa mobil cihazlar için optimize edilmiştir."... Şimdiye kadar çok güzel çıkmadım, ancak bu birkaç saat içinde yapılan geçici bir versiyon. Belki bir gün eller bunu verimli ve iyi bir şekilde yapmak için ulaşır.

WordPress'te sitenin mobil versiyonunda ustalaşmada iyi şanslar, sonuçlarınızı paylaşın. Bir sonrakine kadar!

21 Nisan'da Google, mobil arama sonuçlarında taşınabilir cihazlar için optimize edilmemiş siteleri düşürmeye başladı. Bu, birçok kişiyi harekete geçmeye ve sitelerini mobil uyumlu konsepte uygun hale getirmeye zorladı. Ve bu şaşırtıcı değil:

• Günümüzde internet satışlarının %23'ü telefon üzerinden yapılmaktadır.
• Akıllı telefonların ve mobil bilgisayarların sahipleri World Wide Web'i giderek daha fazla kullanıyor.
• Tablet sahiplerinin %52'si taşınabilir aygıtlarından alışveriş yapıyor.

Mobil kullanıcıların sayısı hızla artıyor ve İnternet kullanıcıları masaüstü bilgisayarlardan telefonlara ve tabletlere geçiyor, İnternet projenizin beklentilerini ve sürekli artan rekabette gelecekte var olup olmayacağını düşünmeye değer. . Bu nedenle, duyarlı tasarımın bugünle ilgilenmesi önemlidir.

İnternet kaynağınız arama motorlarının gözünde nasıl görünüyor? Bir şekilde okumak için yakınlaştırmanız, metni yatay olarak kaydırmanız mı gerekiyor? Bu durumda, kullanıcıların büyük bir bölümünü kaybedebilir, davranışsal faktörleri kötüleştirebilirsiniz. Bu nedenle, site arama sonuçlarında düşer ve trafik düşer. Kullanıcılar bazen günde düzinelerce İnternet kaynağını ziyaret eder, bu nedenle uygunsuz içeriği atlamaları ve zamandan tasarruf etmek için çalışmamaları muhtemeldir.

Bir web sitesi tasarımı nasıl duyarlı hale getirilir

1. Tabii ki, bir web geliştiricisiyseniz, belirli tasarımları ve duyarlı yapıları kullanarak HTML 5 kodu yazabilirsiniz. Değilse, bu amaç için bir profesyonel işe alınabilir. Ancak, daha basit yollar var.
2. Bu nedenle, siteniz CMS temelinde oluşturulduysa (örneğin, Joomla veya WordPress), başlangıçta farklı cihazlar için uyarlanmış bir şablon satın alabilir veya indirebilir ve ardından bunu kendiniz benzersiz hale getirebilirsiniz.
3. CSS3'te medya sorguları oluşturmanın da bir yolu var. Tarayıcı penceresinin boyutuna ve kullanılan cihaza bağlı olarak, sayfaların şu veya bu şekilde görüntülenmesi için öngörebileceğiniz koşullardır. Örneğin, ekran genişliği 600 pikselden azsa belirli stilleri görüntülemek için bir koşul (@medya kuralı) belirtebilirsiniz. Ancak bu sadece bir örnek. Çok daha fazla koşul var. CSS düzeni hakkında bir şey anlıyorsanız, medya sorgularıyla uğraşmak çok zor değil.
4. Çerçeveleri kullanmak, tasarımcıların uygulama kolaylığı için onları kullanmayı sevmelerinin başka bir yoludur. Duyarlı çerçevelerle nasıl çalışılacağını bilmek size tonlarca zaman kazandırabilir. Bunların bir listesi Undereb.ru'da bulunabilir.

Sitenin mobil versiyonu için hizmetler

Peki, mizanpajla başa çıkmakta zorlanıyorsanız ve kodla çalışmaktan uzaksanız, mobil site oluşturmak için hizmetleri kullanın.

Hizmetin yardımıyla, taşınabilir bilgisayarlar ve telefonlar için kaynağın uygun bir sürümünü hızlı bir şekilde oluşturabilirsiniz. Burada birçok esnek ayar var. Tek dezavantajı ücretli bir hizmettir, aylık 9 ABD dolarıdır, ancak mobil versiyonun dudamobile alt etki alanına yerleştirilmesi ve hizmetin reklamı ile ücretsiz kullanımı da seçebilirsiniz.

Az sayıda ayarda farklılık gösterir. Veriler rss beslemesinden alındığından, site hemen hemen tüm mobil cihazlarda açmak için uygun olacaktır.

. Kaynakları iPad ve akıllı telefonlar için uyarlamak için yapıcı. Ticari amaçlarla kullanılması uygundur. Ücretsiz olarak kullanabilirsiniz, ancak gelişmiş ücretli seçenekler de vardır. Javascript ve HTML5 desteği vardır. Web sitenizin taşınabilir bir sürümünü oluşturmaya başlamak için orada kaydolmanız gerekir. Kayıt çok kolaydır, e-posta ile onay gerekmez. Bir WordPress blogunuz varsa, ana masaüstü sürümünden mobil sürüme yönlendirmek için WordPress Mobile by Mobify eklentisini yüklemeniz gerekir.

Mobil trafik uyarlaması için WordPress eklentileri

WPtouch. Eklenti birçok taşınabilir cihazı destekler, gönderileri ajax ile yükler. Yönetici panelini kullanarak görsel modda tasarım öğeleri için esnek ayarlar belirleyebilirsiniz. Milyonlarca indirme, eklentinin gerçekten kullanışlı ve kullanımı kolay olduğunu gösteriyor.

WP Mobil Dedektör. Gelişmiş mobil istatistikler içerir, resimleri azaltabilir, içeriği biçimlendirebilir ve çok sayıda cihazı (yaklaşık 5000 telefon) tanımlayabilir. Mobile Detector, akıllı telefonlar ile normal telefonları ayırt etmeyi "öğrenen" ilk eklentilerden biridir.

MobilBasın. Bu, siteyi minimuma yükleyen hafif bir eklentidir. Mobil sürüm, reklamlar, widget'lar vb. gibi tüm "ağır" öğeleri hariç tutar. MobilePress'in asıl amacı siteyi taşınabilir cihazlara hızlı bir şekilde yüklemek olduğundan, zengin bir tasarım ayarı seçeneği yoktur.

WordPress Mobil Paketi... Mobil sürümde yapısal öğeler korunur, ancak widget'ları, kenar çubuklarını vb. her zaman devre dışı bırakabilirsiniz. Eklenti, cihazı otomatik olarak algılar ve türüne bağlı olarak temayı bağlar. Mobil Paket istatistik sağlar, çok sayıda ayar vardır. Böylece yazı tiplerini, boyutlarını ve renklerini değiştirebilir, kendi logonuzu ve grafik öğelerinizi ekleyebilirsiniz. Eklenti, siteyi farklı boyutlara, ekran yönlerine, tarayıcılara kolayca uyarlar.

Böylece, düzen hakkında bir fikriniz olmadan bile, bugün bir web sitesi / blog için uyarlanabilir bir şablon koyabilir veya çevrimiçi hizmetleri kullanarak bir şeyler tasarlayabilirsiniz. Biraz zaman verin ve ziyaretçileriniz artan dönüşümler ve iyileştirilmiş davranışsal faktörlerle size teşekkür edecek.