Wordpress mobil sürüm yapma. WordPress'in mobil versiyonu - WPtouch eklentisi. WP Mobil Sürümü Mobil Eklentisi

Sonunda yap! WordPress sitenizin bir mobil sürümünü oluşturun ve her mobil ziyaretçiyi, okunabilirlik için sayfaları sürekli yakınlaştırma ve N'inci sayıda gereksiz hareket gerçekleştirme sıkıntısından kurtarın.

Bunu birkaç dakika içinde yapmanıza yardımcı olacak en havalı ve en önemlisi ücretsiz WordPress eklentilerinden 7'sini size sunuyoruz.

WordPress sitenizin mobil sürümünü oluşturmak için eklentiler

Büyük olasılıkla, "duyarlı tasarım" terimi sizin için yeni değil, çünkü 2 yıldır herkesin dilinde. Ancak henüz bilmiyorsanız, anlamı siteyi mobil cihazlar için "dönüştürmek" veya "uyarlamaktır". Yani, ister tablet ister akıllı telefon olsun, herhangi bir gadget'tan gelen bir ziyaretçi, sitenizin sayfalarını sabit bir PC veya dizüstü bilgisayardan görüntülemek kadar kolay olacaktır.

Aşağıda, bu sorunu çözmenize %100 yardımcı olacak dört eklenti bulunmaktadır - WordPress'te sitenizin mobil bir sürümünü oluşturun.

1. hamsi

Sitenin görüntüleneceği mobil cihazın ekran çözünürlüğüne göre görüntüleri yeniden boyutlandırmak için çok kullanışlı Hammy eklentisi ile başlayalım. Etiketin yerini alıyor üzerinde

ve ayrıca görüntüyü yeniden boyutlandırmak için WordPress 3.5'in görüntü kodunu kullanır.

Eklentiyi kullanmak için bazı kesme noktaları ayarlamanız ve kapsayıcının HTML öğesini seçmeniz gerekir. Böylece eklenti, seçtiğiniz kesme noktalarını kullanarak, ekran genişliği kesme noktasına ulaştığında görüntüyü yeniden boyutlandırır. Ayrıca belirli sınıfları bazı görüntüleri yok sayacak şekilde ayarlayabilirsiniz.

2. Duyarlı Widget'lar

Bu eklenti, yalnızca iPad, Nook, PlayStation Vita gibi gadget'larda ve tabletler ve akıllı telefonlar gibi diğer yaygın cihazlarda kullanılabilen yeni WordPress metin / HTML widget'ları sunar.

Eklentiyi kullanmak için, WordPress widget'larını temel düzeyde anlamanız gerekir. Widget sayfasını açın, aşağıdaki cihazlar ve ekran türleri için birçok yeni widget göreceksiniz:

  • mobil
  • Mobil (manzara)
  • iPhone'lar ve iPod'lar
  • Phablet'ler
  • Tablet (portre)
  • Tablet (manzara)
  • iPad Portre
  • iPad Manzara
  • Nexus tabletler
  • Kindle Tabletler
  • Yüzey Tableti
  • köşe tabletleri
  • PS Özgeçmişleri
  • masaüstü bilgisayarlar
  • Büyük Monitörler (1240 piksel + ekranlar)
  • Yalnızca yazdır

Bu widget'ların çoğu, belirli cihazlarda widget'ların görünümünü özelleştirmek için kullanılabilecek onay kutularına sahiptir. Örneğin, widget'ı iPad'de değil de yalnızca tabletlerde görüntülemek istiyorsanız, gerekli onay kutusunu işaretleyin.

3. WP Işık Kutusu 2

Çok popüler bir "ışık kutusu" eklentisi, bindirme efektli açılır görüntüler ve galeriler kullanmak için. Ancak bu eklentinin "uyarlanabilirlik" sorununu çözmediğini, ancak kendisinin duyarlı olduğunu unutmayın.

Eklentiyi kullanmak için etkinleştirmeniz yeterlidir. Yorumlarda Lightbox'ı etkinleştirmek veya animasyon süresini değiştirmek gibi çeşitli ayarları vardır. Ancak genel olarak eklenti, etkinleştirmeden hemen sonra çalışır ve ek yapılandırma gerektirmez.

4. Sorumlu

Son derece kullanışlı bir WordPress eklentisi. Kasadan çıkmadan tarayıcınızda duyarlı tasarımı test etmenize yardımcı olacaktır. Sayfanın üst kısmına, istediğiniz duyarlı cihazlar (akıllı telefonlar, tabletler, masaüstü ekranları gibi) için sayfayı yeniden boyutlandırabileceğiniz ve gerekli ekran çözünürlüklerini ayarlayabileceğiniz sabit bir çubuk yerleştirmek için Viewport Resizer Bookmarklet'i kullanır.

Eklentiyi kullanmaya başlamak için, onu etkinleştirmeniz ve sitenin sayfalarından birini ziyaret etmeniz yeterlidir. Panel, her birinin üzerinde görünecek ve bu, duyarlı tasarımı sorunsuz bir şekilde test etmeyi mümkün kılacaktır.

Mobil temalar oluşturmak için eklentiler

Bu eklentiler çok ilginç bir şekilde çalışır: Bir kullanıcı sitenizi bir mobil cihazdan ziyaret ettiğinde farklı WordPress temaları gösterirler. Bu özellik, özellikle siteniz mobil cihazlara uyarlanmamış bir tema kullanıyorsa kullanışlıdır. Ve bir mobil gadget için sitenin temasını değiştirmek için ne zamanınız ne de arzunuz yoksa, aşağıdaki üç eklenti özellikle sizin gibi tembeller için yaratılmıştır! :-)

5. WPTouch Mobil Eklentisi

Bu belki de çekici bir mobil web sitesi oluşturmak için en popüler ücretsiz eklentilerden biridir. Bugüne kadar, derecelendirmesi olası 5 yıldız üzerinden 3,9'dur. Eklentiyi kurduktan ve etkinleştirdikten sonra, birçok kullanıcı kendilerini sitenin mobil sürümünü oluşturmak için standart setle sınırlayabilecek olsa da, bir dizi harika işlev sizin için kullanılabilir olacaktır.

Ama dikkat et! Temmuz 2014'te, WPTouch 3 eklenti sürümünün güvenlik açığı olduğu biliniyordu, hemen fark edildi ve düzeltildi, ancak bu eklentiyi kullanan birçok siteye zarar vermeyi başardı. Bu nedenle, eklenti güncellemeleri için her zaman bizi takip etmeye devam edin ve tüm sürümlerde sitenizin güvenliğine dikkat edin.

6. WordPress Mobil Paketi

Mobil WordPress temalarında bir başka lider. Eklentinin indirme sayısı 600 bini aştı ve derecelendirme mümkün olan 5 üzerinden 3,8 yıldız. Serinliği, klasik tasarımın bir mobil uygulama arayüzü ile değiştirilmesinde yatmaktadır.

Önceki WPTouch eklentisi gibi, bunun da sadece kurulum ve aktivasyona ihtiyacı var. İsterseniz ayarlara girebilirsiniz, ancak bu gerekli değildir. Eklenti, etkinleştirildikten hemen sonra kullanılabilir.

7. Jet paketi

Bu eklenti, WordPress.com ve Automattic'in desteğiyle kanıtlandığı gibi, benzer araçlar arasında popülerlik açısından lider bir konuma sahiptir. Çok kullanışlı bir "Mobil Tema" özelliğine sahiptir. Kullanmak için eklentiyi kurup etkinleştirdikten sonra ayarlar sayfasına (Jetpack → Ayarlar) gitmeniz gerekir. Eylem minimum ve maksimum fırsatlardır. Bu ücretsiz eklentiyi seçerseniz kendiniz göreceksiniz.

Size verebileceğimiz tek tavsiye bu eklentiyi Disqus eklentisi ile çok uyumlu olmadığı için kullanmamanızdır.

Çözüm

Web tasarımı alanında önemlidir ve özellikle sizin için gerçekten yararlı olabilecek yeni ürünler için her zaman bizi takip etmeye devam etmelisiniz. Bizim durumumuzda, "mobil cihazlar için uyarlanabilirlik", tüm site sahipleri tarafından kullanılması ve tabiri caizse, mobil cihazlar çağının gereksinimlerini karşılaması gereken standart bir özellik haline geliyor.

Bu seriden herhangi bir eklenti kullandıysanız veya listemizde olmayan kendi sürümünüz varsa - açgözlü olmayın, diğer kullanıcılarla paylaşın.

Son yıllarda web tasarımcıları ve geliştiricileri son derece mobil bir dünyada yaşıyorlar. Bu makale, web sitenizi daha güzel ve mobil uyumlu hale getirmenize yardımcı olacak yedi eklentiye genel bir bakış sunar.

Bu ziyaretçiler genellikle bir tablet veya akıllı telefon kullanarak siteyi ziyaret eder. Doğal olarak, web siteleriniz mobil uyumlu olmalıdır, yoksa bu ziyaretçileri kaybedebiliriz.

Bu nasıl başarılabilir? Web sitelerimizi mobil uyumlu hale getirmeliyiz. Bu makale, web sitenizi daha güzel ve mobil uyumlu hale getirmenize yardımcı olabilecek yedi eklentiye genel bir bakış sunar.

Duyarlı ve duyarlı yardımcı eklentiler
Son iki yılda, "duyarlı" veya "duyarlı" terimlerini hiç duymamış olmanız pek olası değildir. Bu yaklaşımın amacı, bilgilerin mobil cihazların ekranlarında doğru şekilde görüntüleneceği web sayfaları oluşturmaktır.

Aşağıdaki dört WordPress eklentisi, web sitenizde mobil uyumlu sayfalar oluşturmanıza yardımcı olacaktır.

1. hamsi

hamsi Mobil cihazlarda doğru görüntülenmesi için sitenizdeki resimleri yeniden boyutlandıran kullanışlı bir eklentidir. Etiketlerin yerini alır üzerinde

ve görüntüleri yeniden boyutlandırmak için WordPress görüntü kodunu kullanır ..

Eklentiyi kullanmak için birkaç kesme noktası belirlemeli ve istediğiniz HTML öğesini seçmelisiniz. Kesme noktasında, genişlik kesme noktasına ulaştığında görüntünün boyutunu ayarlayabilirsiniz. Ayrıca, yoksayılacak bazı görüntü sınıflarını da belirtebilirsiniz.

2. Duyarlı Widget'lar

Duyarlı Widget'lar, WordPress için yalnızca iPad, Nooks, PlayStation Vita gibi belirli cihazlarda ve tabletler veya akıllı telefonlar gibi diğer çok yönlü cihazlarda görünen yeni metin / HTML widget'larını tanıtan bir eklentidir.

Eklentiyi kullanmak için, yalnızca WordPress widget'larını temel düzeyde anlamanız gerekir. Widget sayfasını açın, aşağıdaki cihazlar ve ekran türleri için birçok yeni widget göreceksiniz:

  • mobil
  • Mobil (manzara)
  • iPhone'lar ve iPod'lar
  • Phablet'ler
  • Tablet (portre)
  • Tablet (manzara)
  • iPad Portre
  • iPad Manzara
  • Nexus tabletler
  • Kindle Tabletler
  • Yüzey Tableti
  • köşe tabletleri
  • PS Özgeçmişleri
  • masaüstü bilgisayarlar
  • Büyük Monitörler (1240 piksel + ekranlar)
  • Yalnızca yazdır
Çoğu widget'ın istisnalara izin veren onay kutuları vardır. Örneğin, widget'ı iPad'de değil de tabletlerde görüntülemek istiyorsanız, kutuyu işaretleyebilirsiniz ve istediğiniz bilgiyi alacaksınız.

3. Sorumlu

Sorumlu Tarayıcıda anında sayfalarınızın yanıt verme durumunu kontrol eden çok kullanışlı bir WordPress eklentisidir. Gerektiğinde akıllı telefonlar, tabletler veya masaüstü ekranları gibi mobil cihazlar için sayfayı yeniden boyutlandırabileceğiniz ve yeniden boyutlandırabileceğiniz, sayfanızın üst kısmında sabitlenmiş bir çubukta bulunan Viewport Resizer Bookmarklet'i kullanır.

Eklentiyi kullanmak için etkinleştirmeniz ve sayfalarınızdan birini açmanız yeterlidir. Panel her sayfada görüntülenecektir, böylece sayfalarınızın yanıt verme durumunu sorunsuz bir şekilde kontrol edebilirsiniz.

Mobil temalar için eklentiler
Bu eklentiler daha özel bir şekilde çalışır: Bir kullanıcı sitenizi bir mobil cihazdan ziyaret ettiğinde farklı WordPress temaları göstermenize yardımcı olurlar. Bu, özellikle mobil uyumlu olmayan bir temanız varsa kullanışlıdır. Temanızı mobil cihazlara uyarlamak için zamanınız veya fırsatınız yoksa, bu harika eklentiyi işinizde kullanabilirsiniz.

4. WPTouch Mobil Eklentisi

Bu eklenti beş milyondan fazla indirmeye ve 5 üzerinden 3,9 yıldız derecesine sahiptir. WPTouch, bugün muhtemelen en popüler mobil tema eklentisidir. Web sitenizin mobil sürümünü çok basit, tam otomatik bir şekilde oluşturmanıza olanak tanır.

Eklentiyi kullanmak için sadece kurup etkinleştirmeniz yeterlidir ve varsayılan ayarları birçok kullanıcı için yeterli olacaktır. Ayrıca sayfa yapılandırmasında birçok parametrede ince ayar yapabilirsiniz.

Bir uyarı olarak, Temmuz 2014'te duyurulduğunu söylemeliyim: WPTouch 3 sürümlerinde ölümcül bir güvenlik açığı vardı. Güvenlik açığı hemen düzeltildi, ancak eklenti kullanıcıları için büyük sorunlara neden olmuş olabilir. Güncellemeleri izlemek için iyi bir bahane ve bu hem çekirdek hem de tüm eklentiler ve temalar için geçerli.

5. WordPress Mobil Paketi

WordPress Mobil Paketi WordPress siteleri için mobil temalar sunan başka bir iyi eklentidir. Şu anda 600.000'den fazla indirme ve 5 üzerinden 3,8 yıldız derecelendirmesi var. WordPress Mobil Paketi, siz ve web sitenizin ziyaretçileri için benzersiz bir mobil tema sunar - klasik mobil arayüz yerine bir mobil uygulama arayüzü.

WPTouch gibi, WordPress Mobil Paketi de yükleyip etkinleştirdikten hemen sonra tamamen kullanıma hazır bir eklentidir. İsterseniz konfigürasyon sayfasında bazı ayarlamalar yapabilirsiniz.

6. WordPress.com'dan Jetpack

Jetpack, yalnızca en popüler WordPress eklentilerinden biri değil, aynı zamanda WordPress.com ve Automattic tarafından desteklenmektedir. Bu eklenti ayrıca çok faydalı bulabileceğiniz bir "Mobil Tema" özelliğine sahiptir.

"Mobil tema" işlevini kullanmak için Jetpack'i kurup etkinleştirdikten sonra girin ve yapılandırma sayfasındaki ayarlara gidin. Modüller listesinde "Mobil tema"yı bulun ve etkinleştirin. O kadar değil, ancak bundan sonra mobil cihazlar için hızlı ve temiz bir arayüzün keyfine varacaksınız.

Çözüm
İnternette, özellikle onlardan bir şey (para veya övgü) bekliyorsanız, zamana ayak uydurmak ve ziyaretçilere istediklerini sunmak her zaman önemlidir. Mobil yanıt verme özelliği bu günlerde standart hale geliyor ve sitenize mobil ziyaretçileri kaybetmek aptallık olur.

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 aya ait 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 geçen yıl mobil teknolojilerin hayatımıza sizinle birlikte daha fazla girdiğini düşünüyorsanız, çağa ayak uydurmayı 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 - "Sonraki"). 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. Şunlar. 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 bloglarını oluşturanlar, henüz böyle bir konu yokken 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. Aynı anda 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 olmayacak, 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 versiyonunun 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!

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. WordPress motorunun resmi web sitesinde sunulan tüm temalarla harika çalışır. 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 alana yönlendirme yapılmayacaktır. 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 gerekir. 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ıralamada 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 ekran ö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ı sadece 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.

Bilmiyorsanız, günümüzde birçok ülke ve bölgede internet trafiği tüketiminin temelini mobil cihazlar oluşturuyor ve iMessage ve WhatsApp gibi araçlar tonlarca mektup ve mesajı kağıt üzerinde değil, ekranda işliyor. Giderek, insanlar masaüstü sürümleri yerine mobil sitelere yöneliyor. Sitenizin yalnızca bir dizüstü bilgisayar veya PC ekranında değil, aynı zamanda bir akıllı telefon ve tablette de doğru görünmesini ve çalışmasını nasıl sağlarsınız? Bugün bahsedeceğimiz eklentiler kesinlikle bu görevle başa çıkmanıza yardımcı olacaktır.

Bu nedenle, normal WordPress sitenizi duyarlı bir mobil siteye dönüştürmeniz gerekir. İşte tamamen ücretsiz olsa da, tasarımını ve yapısını korurken size yardımcı olacak ve sitenizi mobil kullanıcılar için erişilebilir hale getirecek eklentiler.

1. Jet Paketi

WordPress sitenizi mobil uyumlu hale getirmenin en kolay ve tartışmasız en etkili yolu ile başlayalım. Araç seti Jet Paketi sadece 1 tuşa basarak bu sorunu çözmenizi sağlar. Ayrıca: muhtemelen diğer temel eklentilerin arasına yüklemişsinizdir. Eğer öyleyse, site yöneticisi menüsündeki "JetPack" bağlantısına tıklayın ve modüller sayfasına gidin. Orada etkinleştirmeniz gerekiyor " Mobil Tema"- ve işin bitti.

2. WPtouch


Listedeki bir sonraki en etkili ücretsiz araç eklentidir. WPtouch... Halihazırda 4,3 milyondan fazla kez indirilmiştir. Tek satır kod yazmadan sadece birkaç dakika içinde güzel ve hızlı bir mobil site oluşturmanıza olanak tanır. WPtouch Pro olarak adlandırılan ücretli sürüm, ayrı bir yönetici paneli ve bilet sisteminde destek de sunuyor.

3. WP Mobil Dedektör


Bu eklenti, normal cep telefonlarının ve akıllı telefonların otomatik olarak tanınmasına sahiptir. Buna bağlı olarak, site her belirli cep telefonu veya diğer gadget için uyumlu bir sürümde yüklenir (ekran çözünürlüğü, köşegen ve diğer parametreler dikkate alınarak). Toplamda 7 adet önceden yüklenmiş mobil tema seçeneği bulunmaktadır. Ayrıca, bu eklenti, kullanıcının ekranına bağlı olarak görüntüleri otomatik olarak yeniden boyutlandırır ve yeniden boyutlandırır. Ayrıca, kendi widget'ları ve istatistik koleksiyonuna sahiptir.

Ana Özellikler:

  • 5 binden fazla farklı cep telefonu ve akıllı telefondan oluşan bir veri tabanına dayalı otomatik cihaz algılama.
  • Standart "çeviriciler" ile gelişmiş mobil cihazlar arasında ayrım yapabilme.
  • Tekil ziyaretlerin sayısı, arama trafiği vb. dahil olmak üzere mobil kullanıcılarla ilgili istatistiklerin toplanması.

4. WordPress Mobil Paketi


Bu eklenti, çeşitli popüler mobil cihazları tanımlamak ve içeriği belirli bir cep telefonunun ihtiyaç duyduğu çözünürlük ve kalitede görüntülemek için alan eşleme ve arama aracılarını destekler. Ayrıca, tek bir tema için özelleştirilebilir renk şemaları vardır.

Ayrıca eklenti içerir:

  • mobil ve klasik masaüstü teması arasında geçiş yapın;
  • Nokia ve WebKit tarayıcıları için temalar dahil olmak üzere desteklenen ve tanınan bir dizi cihaz;
  • renk paletinin CSS'de ince ayarlar desteğiyle temalara göre özelleştirilmesi;
  • resimlerin otomatik uyarlanması ve yazıların ve sayfaların bölünmesi;
  • mobil yönetici paneli;
  • AdMob veya Google'ın Mobil Adsense gibi platformlarını destekleyen bir mobil reklam widget'ı;
  • mobil analitik;
  • Büyük bir masaüstü ekranında siteye göz atarken bir mobil cihazda bir siteye hızlı bir şekilde yer işareti koymak için bir siteye barkod eklemek için bir widget.

5. WP Mobil Sürümü


Aslında önünüzde bir önceki eklentinin ikiz kardeşi var. Aynı özelliklere ve seçeneklere sahiptir, ancak aynı zamanda yorum sistemi ve siteler için kendi oluşturucusuna sahip mobil bir XML haritası için destek vardır, bu da arama motoru optimizasyonu üzerinde iyi bir etkisi olacaktır. Ayrıca, bu eklenti, m.facebook.com gibi bir alt etki alanında, daha hızlı önbelleğe alma ve mobil çerezler için iyi olan bir mobil sürüm oluşturur.

6. Wapple Architect Mobil Eklentisi


Bu eklenti, web içeriğini çeşitli cihaz ve platformlarda özelleştirmek, işlemek ve sunmak için özel olarak tasarlanmış WAPL biçimlendirme dilinde yazılmıştır. Bu eklenti, koklama yönteminden daha iyi olan her belirli kullanıcı cihazı için kendi API'sini kullanır. Masaüstü sitenin adres yapısını etkilemez. Sadece işe yarayan oldukça basit bir çözüm.

7. MobilBasın


2 tema ile gelen ve mobil geliştiriciler tarafından temaların daha da geliştirilmesine yardımcı olan oldukça popüler ve basit bir eklenti.

8. Duda Mobil Web Sitesi Oluşturucu


Duda Mobile oluşturucu eklentisi, Forbes, Huffington Post, NY Times gibi projeler ve yayınlar da dahil olmak üzere sitelerin mobil sürümlerinin oluşturulmasına yardımcı oldu. Çok basittir ve normal web sitenizi hızlı bir şekilde mobil siteye dönüştürür. Tüm WordPress temalarıyla çalışır ve ana sitenizle otomatik olarak eşitlenir.

gastroguru 2017