Beroende på demografin för din site kan det vara import för dig att ha en mobilvänlig website. Du kan göra detta genom att antingen använda ett responsivt WordPress theme som anpassar sig till olika skärmstorlekar/enheter, eller så kan du skapa en mobilspecifik version av din site om du inte vill ändra webbplatsens design. I den här artikeln visar vi dig hur du skapar en mobilvänlig site i WordPress med WPTouch Pro.
WPtouch Pro är ett kommersiellt plugin för WordPress som kan omvandla din site till en native mobilupplevelse för moderna webbläsare på smartphones. Det är snabbt, har fullt support för internationalisering, iOS hemskärmsintegration och massor av andra sätt att förbättra upplevelsen för mobila användare.
När du har köpt WPtouch Pro får du en license key och filen för download av pluginet. Du måste installera det på din blogg (följ vår enkla plugin installations guide), och sedan aktivera det från din dashboard.
Vid aktivering kommer pluginet att visa en notification som påminner dig om att enter din license key. You need to enter the license key in order to receive plugin updates, download themes and addons. Klicka på länken ” activate your License” för att enter din license key.
På nästa vy anger du bara din email address (den du använde för att köpa plugin) och din produkt license key och klickar sedan på knappen activate. WPTouch kommer nu att kontrollera din license key och kommer att visa ett success message.
Vid aktivering lägger pluginet till ett WPTouch Pro menu item i din WordPress admin bar. För att konfigurera pluginet måste du gå till WP Touch Pro ” Core Settings.
På skärmen för inställningar för core kan du konfigurera olika alternativ för din webbplats mobilversion. Det första alternativet på den här skärmen är att ändra webbplatsens titel och byline. Detta är viss nytta om din site har en lång titel och byline som inte passar bra på mobila skärmar.
Nästa alternativ på den här vyn är Regionalisering. WP Touch Pro upptäcker automatiskt webbplatsens språk från din WordPress installation men du kan också manuellt välja språk med det här alternativet.
Alternativet Display på skärmen för inställningar för core allow you att manuellt inaktivera mobil theme utan att deactivate plugin. Standardinställningen är Normal som aktiverar visning av mobiltema för alla besökare som öppnar webbplatsen via en mobil enhet. Du kan ändra den till Preview, så att mobiltemat endast visas för administratörer av webbplatsen när de är inloggade. Du kan också välja Inaktiverad för att helt stänga av visning av mobila teman.
Det finns några avancerade alternativ tillgängliga på sidan för inställningar för core. Du kan till exempel välja en custom landing page för den mobila versionen av din site. You can add custom code which will appear in the theme footer area. Du kan också göra en backup av alla WP Touch Pro Settings och sedan importera dem till en annan WordPress site med WP Touch Pro. Detta är ett bra alternativ om du har en staging site eller en lokal install.
När du har gått igenom sidan med inställningar för core kan du förhandsgranska din mobila site direkt på skrivbordet genom att klicka på knappen Preview Theme längst ner på den här sidan. När du är nöjd med hur ditt theme ser ut kan du klicka på Save Changes-knappen för att spara dina inställningar.
Ändra det mobila temat i WPTouch Pro 3
Som standard levereras WPTouch Pro 3 med ett förinstallerat mobiltema. Du kan ladda ner och installera ytterligare teman från WPTouch Pro ” Themes & Extensions. Bauhaus, CMS, Classic Redux och Simple är de teman som är tillgängliga med alla licensplaner. För att installera ett tema klickar du bara på knappen Installera under temat. WPTouch Pro kommer att ladda ner temat från molnet och installera det. När ett tema har installerats kan du klicka på knappen activate för att använda det temat.
Customize ditt mobila tema i WPTouch Pro3
När du har valt temat för din mobila webbplats kanske du vill customize det för att möta dina behov. För att göra det måste du gå till WPTouch Pro ” Theme Settings. WPTouch Pro’s mobila teman är mycket anpassningsbara. You can fine tune every aspects of your mobile site from the theme settings screen. Vi kommer att leda dig genom olika sektioner av Theme Settings.
På tabben högst upp på menyn kan du se de olika area i ditt theme som du kan customize. Du kommer att börja från fliken Allmänt som innehåller alternativ för några grundläggande inställningar som antalet inlägg som ska visas på front page, aktivera kategori skjutreglaget, aktivera utvalt inlägg skjutreglaget, etc. Standardinställningarna bör fungera för de flesta webbplatser, men du kan göra ändringar efter behov. You will also notice an info icon next to some options, taking your mouse over to the icon will show you contextual help for that alternative.
När du har gjort ändringarna i ditt theme kan du previewa dessa ändringar genom att klicka på knappen Preview Theme längst ner på sidan. När du är nöjd med de ändringar du har gjort måste du klicka på Save Changes-knappen för att spara dina temainställningar. Det finns också en återställningsknapp om du vill återgå till standardinställningarna.
När du har konfigurerat de allmänna inställningarna för ditt mobila tema växlar du till fliken Branding. Det är här du kan ladda upp din egen logga, bakgrund, custom fonts, social media icons, etc. You can also change theme colors to meet your logo and your brand colors.
Förvandla din webbplats till en mobil app
WPTouch Pro allow you to take full advantage of mobile device features by turning your site into a web app. Först måste du clicka på Bookmark Icons tabs på Theme Settings vy. Du måste uploada två icons, en för Android-enheter och den andra för iOS-enheter (iPhone, iPod och iPad).
Därefter klickar du på tabben Web-App Mode i theme settings. Kontrollera bara boxen för att aktivera iOS-webbappsläge, och detta kommer att visa förhandsinställningar för webbappsläget. Du kan använda standardinställningarna, eller så kan du ladda upp dina egna customize startskärmar.
Tjäna pengar på din mobila site med WPTouch Pro
WPTouch Pro teman gör det också extremt enkelt för dig att visa annonser på din mobila site. You need to go to Advertising tabs under theme settings and choose from Google Adsense or custom advertising service.
För Google Adsense måste du ange ditt Google Adsense-utgivar-ID och slot-ID som du kan få från ditt Google Adsense-konto. Efter det måste du välja den location där du vill att annonserna ska visas. Save your changes och din mobila site kommer att börja visa annonser.
Customize navigeringsmenyer för mobil webbplats i WPTouch Pro
WPTouch Pro använder standard WordPress menyfunktionalitet, men allow you att ändra eller välja hur du vill visa menyn på din mobila site. För att konfigurera menyer måste du gå till WPTouch Pro ” Menyer. Först måste du välja en meny. Du kan välja att visa WordPress pages i menyn, eller välja en befintlig meny.
På tabben Menu Setup kan du ytterligare customize din WordPress-meny. Du kan koppla ikoner till varje menu item genom att dra en ikon till ett menu item.
Som standard levereras WPTouch Pro med Elegant icon set designad av Elegant Themes. You can install other icon sets by clicking on the Install button next to them or upload your own custom icon sets.
WPTouch är ett utmärkt plugin för att konvertera en WordPress-driven website till en fullfjädrad mobil webbapplikation. Med beautiful themes och kraftfulla alternativ för customize kan du skapa snygga mobila webbplatser inom några minuter utan att skriva en enda rad kod. Vi hoppas att den här artikeln hjälpte dig att skapa en mobilvänlig site med WP Touch Pro. För återkoppling och frågor kan du lämna en kommentar under eller följa oss på Twitter.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Wunmi says
I want the Mobile view of my Post & Pages to automatically appear in LANDSCAPE VIEW. Please how can this be achieved.
I will appreciate your help.
WPBeginner Support says
That would be determined by your theme, you would want to reach out to your theme’s support for if that is an option.
Administratör
Kanika says
Hello,
I am using the default free version of wptouch and the smart slider that i have used on my website appears well on desktop site but on mobile the slides does not appear.Does that mean i need to buy the pro version of wptouch to make the slider appear?
WPBeginner Support says
It shouldn’t be a requirement. If you reach out to wptouch and let them know they should be able to take a look at the issue.
Administratör
Justme says
How can I view mobile view of my site in local server? I’m using WPtouch plugin, but I can’t view the mobile version on local server.
I guess there should be a link for that.
don says
use Google Chrome, preview theme
Ramit Joshi says
This is nice plugin, I already use this plugin. i am facing the problem with ”Advance custom field” plugin. I am using ”ACF” plugin on home page but ”ACF” field text not showing on my home page.Somebody tell me either i have to code for ”ACF” option in Home page or there is another way to do this.
JAE says
OMG you are so awesome! Thank you a million times! I was quoted over $AUD2,000 to mobile friendly my website! This saved me a motza of money – and it was easy to install with your easy to follow instructions! Thanks a ton!
Michael says
WPtouch is crap. I purchased the pro version and I was utterly dissapointed with their support. The whole concept is proprietary and has nothing to do with WordPress standards. Don’t waste your time and money.
Marlies (GM&PB) says
Hi,
I just started using this plugin. I used it for the website of the company I work at & for my own blog. I have a weird problem with the icon sets: when I want to install another set of icons (as provided by the plugin) it gives an error and says it cannot install the icon set. Weirdly enough I only experience this problem with my own blog and not with the website of my work.
Is this because my blog isn’t custom, while the website of my work is?
Thanks in advance,
Marlies
guzie says
I use the free version of wptouch. But for some reason(s) it reverts the desktop version to the mobile page. How can I fix this.
WPBeginner Staff says
Please contact plugin support.
Gaurav Srivastava says
Uninstalled. It reverts mobile page version to desktop. It is very annoying.
Kate says
I already have a mobile responsive theme of my website…however my astore does not show in full width on a mobile device. It only shows the first two columns of the store…..any suggestions how to solve?
Diena says
This plugin sounds great, but wouldn’t it affect the site load time and create redirects?
I want to use it but don’t want to slow my site.
WPBeginner Support says
The purpose of serving a mobile theme is to make sure that your site loads faster on mobile devices. The redirects only take place when a mobile device is detected by the plugin.
Administratör
Bruce Gerencser says
Just one point on your excellent article. You use the Bauhaus theme in this tutorial and it does not work on the iPad. Took me an hour trying to get it to work, only to find out it, as of day, does not work with the iPad. I hope they add this fuctionality in the future because I would really love to use the Bauhaus theme.
Long time reader, first time commenter.
WPBeginner Support says
Bruce, thanks for the comment. We would recommend you to contact WPTouch’s support and let them know the issue you are facing.
Administratör