Gå till innehållet

Hur man skapar en mobil version av din webbplats inom några minuter 15

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Har du någonsin kontrollerat hur din WordPress-webbplats ser ut på små skärmar, inklusive telefoner? Även om du använder ett responsivt mobiltema kommer du och dina besökare att må bättre om du använder ett mobil-tema.

I denna WordPress-tutorial ger vi din WordPress-webbplats en gratis och mobil makeover med plugin WPtouch.

Grunderna för mobilvänlig

Att ha en mobil skärmorienterad design är uppenbarligen en integrerad del av "Mobilvänligt", och det är inte det enda som övervägs.

Mobile Menyer - att kunna använda en separat meny på en mobil är ett måste, och inte bara för att det är lättare att använda, utan också för att du måste visa och redigera innehållet i innehållet.

Plugins för specifik plattform -  möjligheten att använda specifika plugins som inaktiveras baserat på besökarens displayenhet är också fantastisk och användbar. Varför ska WordPress anstränga sig så mycket för att ladda ett plugin om dess funktionalitet inte behövs?

Specifikt mobilinnehåll -  Även om innehållet ska ändras mellan plattformar. På mobiler måste du visa titlar och klipp som passar bättre på den mindre skärmen.

80/20-metoden

Du har nog hört talas om 80/20-regeln, även känd som Pareto-principen efter dess skapare, den italienska ekonomen Vilfredo Pareto.

Att göra din webbplats helt mobil och användarvänlig med ett anpassat tema som länkar den till ditt skrivbordstema, menyer och plugins samt ditt innehåll (som kommer att behöva anpassas till enheten) kräver stora ansträngningar. Men att använda ett plugin kommer att uppnå 80% av vad vi vill ha för bara 20% (eller mindre) av den ansträngning som krävs för en helt personlig strategi.

WPtouch, välja plugin

Om ett plugin har laddats ner mer än 5 miljoner gånger är det mycket troligt att det här är tillräckligt bra.

Men du känner oss, vi gillar inte att rekommendera något till dig utan att kontrollera eller testa ett antal tillgängliga alternativ, plugin WPtouch är verkligen ett klokt val för en snabb och enkel metod för att se till att din webbplats är mobilvänlig. Det är mycket konfigurerbart, även i gratisversionen.

Det är viktigt att notera att WPtouch är endast aktiverat på mobiltelefoner och inte på surfplattor.

Så kommer vi snabbt till grunderna, nämligen installationen och konfigurationen av WPtouch-plugin.

1. Ladda ner och installera

Fortsätt  förlängningar > Add On i din WordPress admin-instrumentpanel, sök sedan efter WPtouch.  Installer et Aktivera plugin.

Alternativt kan du le ladda ner från WordPress-plugin-katalogen och lägg den online via din FTP.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Du ser att ett nytt alternativ kommer att läggas till i din administratörsmeny, WPtouch, vilket är överraskande, där du måste konfigurera beteendet och utseendet på ditt mobiltema.

Det finns fyra sidor med alternativ (vissa med flera flikar), så det kan finnas många saker att konfigurera innan den här fungerar perfekt.

2. Testa det fungerar

Innan vi gör någon konfiguration kommer vi att testa om den verkligen fungerar utan någon konfiguration. Den fria versionen har bara ett tema som standard, så det ska fungera efter att det har aktiverats.

Innan det dock, om du bara vill testa WPtouch och inte vill visa ditt nuvarande arbete på världens telefoner, hoppa till WPtouch > Huvudinställningar och definiera visningsläge sur undersökningen (endast aktivt för anslutna webbplatsadministratörer) sedan, spara ändringar.

Bläddra igenom din webbplats på en mobil enhet (eller simulator) och se till att ditt tema visas på din mobila enhet.

Display-Site-Wordpress-on-Mobile2

 3. Ställ in din mobil meny

Den fria versionen av WPtouch erbjuder den väsentliga förmågan att ange en meny för användning på mobila enheter, och jag uppmanar dig att göra det (naturligtvis först efter att ha funderat över vilket innehåll som är viktigast för dina mobilbesökare! ).

Skapa en ny meny som du brukar göra med WordPress. (Apparence >Menyer). Ge det ett meningsfullt namn, som " Meny mobil " sedan på inställningssidan meny 'Of WPtouch, välj den mobilmeny som du just skapade i listrutan och markeraes meny~~POS=TRUNC.

Responsive-Tema Conguration-Menu

Att skapa en specialmeny för ditt mobiltema är väl värt ansträngningen

Gå tillbaka till din webbplats, uppdatera den och klicka sedan på hamburgarikonen för att verifiera att din mobilspecifika meny visas.

4. Lägg till bokmärkesikoner

När en besökare lägger till din webbplats i sina favoriter kan de lägga till en ikon på sin startskärm. Om du inte anger en ikon använder enheten en standardikon och gör den till en ikon för din webbplats så att din webbplats är lätt att hitta (som en genväg). Det är därför viktigt att ge bilden av ditt varumärke så att det är lätt att identifiera.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Skapa två ikoner, en för Android (96 × 96 pixlar) och en för iOS (120 × 120 pixlar) samtidigt i png-format och ladda upp dem till WPtouch > Temainställningar >  bokmärken ikoner. Du kan också ändra webbplatsens titel här om du vill (om det verkar för långt för dig). Om du lägger till bokmärkesikoner förbättras webbplatsens sökning dramatiskt på en mobil startskärm

Responsive Theme-ikonen till bokmärke

Gå tillbaka till din webbplats, uppdatera den och testa bokmärkesikonen.

5. Nu kan du redigera

Nu när du har alla nödvändigheter redo kan du finjustera din mobils utseende och känsla genom att gå till Huvudinställningar och Temainställningar.

Huvudinställningar

På den här sidan kan du ersätta webbplatsens titel, välja ett specifikt språk, visa mobiltema endast för administratörer (användbart för testning), välja en specifik mobil målsida (hemsida) och lägga till HTML-kod anpassad, CSS eller JavaScript.

Temainställningar

Temainställningar är ganska omfattande men generöst ströda med funktioner från Pro-versionen.

Standardtemat tillgängligt med den fria versionen är Bauhaus, detta tema är faktiskt korrekt. Designen är ren och enkel att använda och innehåller en skjutreglage och rullgardinsmeny kopplad till den nu allestädes närvarande “hamburgar” -ikonen.

Sidan Temainställningar har 5-flikar:

  • Général - den här fliken låter dig leka med att visa temat, inklusive antalet inlägg som ska visas i en sidlista, utesluta inlägg från vissa kategorier och taggar, eller visa utvalda bilder , skjutreglage och inloggningsformulär
  • personalisering - Du har några alternativ här så att du kan välja en färg, logotyp för webbplatsen, anpassat sidfotinnehåll och teckensnitt.
  • Ikoner bokmärken - Som redan diskuterat bestämmer detta ikonen som kommer att visas på besökarens startskärm om han markerar din webbplats som en favorit.
  • Webbapplikation läge / Publicité - Alla användbara men alla begränsade föremål för Pro-versionen som är synliga här, men nedtonade så att du kan se vad du tappar om du inte använder pro-versionen.

Uppgradera till Pro-versionen: de kraftfulla funktionerna, den hemska prismodellen

När du navigerar genom WPtouch-inställningssidorna kommer du att märka att ett antal mycket attraktiva alternativ är begränsade för Pro-versionen: fler temaval, endast mobilinnehåll, Responsiva bilder och cachning för att nämna några. endast ett fåtal.

Tyvärr är prismodellen för WPtouch knappast kundvänlig.

Du kanske tror att att köpa en enda licens för $ 49 kan hjälpa dig att få alla Pro-funktioner för en webbplats, men du skulle ha fel. Det finns ingen caching i en enda webbplatslicens, för att få det behöver du 1 licenspaket till $ 5 och om du vill ha responsiva bilder.

gin WPtouch-tariff för olika licenser

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Tillgång till alla funktioner kräver på ett oförklarligt sätt en multisite-licens.

Varför denna sammanslagning av de två prissättningsmodellerna?

Varför inte uppgradera till en Pro-version och få alla funktioner? Jag låter dig föreställa dig ditt eget svar själv, för dessa priser är nästan oförklarliga.

Med detta sagt är den fria versionen verkligen tillräckligt bra för att ge dig en mycket anständig mobilwebbplats på mindre än 15 minuters ansträngning. Så svårt att klaga på det här.

Vi hoppas att vi har hjälpt dig att göra din webbplats mobilvänlig på 15 minuter. Om du tror att vi har missat en viktig detalj, berätta för oss genom att lämna din kommentar i vårt kommentarsektion.

Den här artikeln innehåller kommentarer 2

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Tillbaka till toppen
Lägga märke till: Odefinierad förskjutning: 0 tum /home2/voirplu/public_html/wp-content/plugins/UltimateTetutesse-master/public/partials/shared-footer.php nätet 17