So erstellen Sie eine mobile Version einer WordPress-Website – Hosting – Namecheap.com
So erstellen Sie eine mobile Version einer WordPress-Website
Gib es zu: Eine schöne und voll funktionsfähige mobile Version Ihrer WordPress-Website zu haben, ist ein Muss, wenn man bedenkt, dass das erhebliche Volumen des Internetsurfens von mobilen Geräten ausgeht. Es ist einfach, eine mobile Website mit WordPress bei Namecheap zu erstellen, unabhängig davon, ob Sie Shared Hosting oder EasyWP WordPress Hosting abonnieren.
Sie haben vielleicht schon bemerkt, dass Web- und mobile Versionen derselben Website manchmal etwas unterschiedliche Inhalte haben. Dies geschieht, um bestimmte Funktionen von der mobilen WordPress-Version auszuschließen, da sie möglicherweise falsch angezeigt werden oder funktionieren oder auf einem kleineren Display einfach überwältigend sind. Plus, Der Google-Suchmaschinenalgorithmus stuft mobilfreundliche Websites höher ein.
In diesem Artikel werden wir verschiedene Möglichkeiten behandeln, um Ihre WordPress-Website mobilfreundlich zu gestalten:
Erstellen von Websites mit responsivem Design: Der gleiche Inhalt und die gleiche URL werden auf jedem Gerät geladen, aber CSS wird verwendet, um das Rendern der Seite entsprechend der mobilen Bildschirmauflösung zu ändern.
Dynamic Serving Sites: Eine URL wird geladen, aber je nach verwendetem Gerät werden unterschiedliche Inhalte und CSS verwendet.
Erstellen separater URLs für Desktop- und mobile Geräte: Verschiedene URLs und damit Websites werden geladen, z.B., nctest.info und m.nctest.info
Denken Sie daran, dass jeder Weg seine Vor- und Nachteile hat, deshalb empfehlen wir, eine SEO-Recherche durchzuführen, bevor Sie fortfahren.
Responsive Webdesign
Responsive Webdesign verwendet CSS3-Medienabfragen. Media Queries ist ein CSS3-Modul, mit dem das Rendern von Inhalten an Bedingungen wie Bildschirmauflösung, Breite und Höhe sowie Ausrichtung angepasst werden kann.
Normalerweise ist die Datei, die Sie bearbeiten müssen, style.CSS. Es befindet sich im Verzeichnis /wp-content/themes/theme_name/.
Eine CSS3-Medienabfrage sieht normalerweise so aus:
@media only screen and (max-width: 480px) {
}
Es ist ein bedingter Code, der den Browser anweist, alle Stylingparameter anzupassen, wenn die Größe des Bildschirms kleiner oder gleich 480px ist.
Um granularer zu werden, können Sie Min-Width- und Max-Width-Intervalle hinzufügen, um verschiedene Geräte anzusprechen:
@media only screen und (min-width: 768px) und (max-width: 959px) {
}
Alle weiteren Styling-Anpassungen sollten zwischen den { hinzugefügt werden…} Klammer.
Als Beispiel nehmen wir das Twenty Ten-Standardthema, das standardmäßig nicht reagiert.
Der erste Code setzt die Hauptrahmengröße des Themas auf 550px:
#access .menü-Kopfzeile, div.menü, #kolophon, #branding, #main, #wrapper, #site-Titel {
Breite:550px;
}
Vergleichen Sie, wie in diesem Fall die Website auf einem mobilen Gerät aussehen wird:
Wie Sie sehen, sind jedoch nicht alle Elemente an den Gerätebildschirm angepasst. Sie müssen im Grunde alle Elemente, die Sie auf Ihrer Website haben, separat anpassen – Header-Bild, Blog-Beschreibung, Breite der Navigationsleiste, Position der Inhaltsebene usw.
Es ist möglich, einige davon auszublenden, z. B. Schieberegler oder Kopfzeilenbilder. Auf diese Weise wird das Aussehen Ihrer Website in der mobilen Version optimiert und benutzerfreundlich.
Der folgende Code sollte verwendet werden (z. B. für Header-Bild):
#branding img {
display:none;
}
Wenn Sie die Größe des Elements ändern möchten (Header-Bild im Beispiel), verwenden Sie
#branding img {
width:100%
}
HINWEIS: Bearbeiten des Stils.CSS-Datei erfordert auch Web-Entwicklungskenntnisse. Vergessen Sie nicht, Ihre Datei zu sichern, bevor Sie sie ändern.
Sobald alle Teile Ihrer Website entsprechend angepasst sind, sollte sie auf mobilen Geräten gut aussehen:
Die meisten WordPress-Themes sind so erstellt, dass sie reagieren – wenn Sie ein neues Theme installieren, können Sie zusätzlich das angehängte Aussehen auf mobilen Geräten überprüfen.
Wenn es keine gibt und Sie nicht sicher sind, ob das Thema, das Ihnen gefallen hat, reaktionsschnell ist oder nicht, können Sie es in den Feature-Filtern definieren, während Sie nach dem Thema suchen.
1. Melden Sie sich in Ihrem WordPress Admin Dashboard an (yourdomain.com/wp-admin ), navigieren Sie zum Menü Darstellung, klicken Sie auf Themen.
2. Klicken Sie auf Neu hinzufügen:
3. Klicken Sie auf Feature-Filter und überprüfen Sie Responsive Layout. Überprüfen Sie bei Bedarf andere Optionen, um ein gewünschtes Thema zu finden.
4. Klicken Sie auf Filter anwenden:
In wenigen Augenblicken sehen Sie die Liste der Themen, die den von Ihnen festgelegten Suchfunktionen entsprechen.
Dynamische Bereitstellung von Websites
Alternativ können Sie je nach Gerätetyp unterschiedliche CSS und Inhalte konfigurieren, die abgerufen werden sollen. Dies kann mit Hilfe der WordPress-Plugins erreicht werden. Die meisten von ihnen haben eine Reihe von Grundeinstellungen kostenlos zur Verfügung.
Als Beispiel verwenden wir eines der beliebtesten Plugins für die Gestaltung mobiler Blogs – WPtouch Mobile Plugin.
Zuerst müssen Sie es im Admin-Dashboard installieren und aktivieren.
Sobald Sie fertig sind, sollten Sie ein Thema für Ihre mobile Version der Website auswählen – navigieren Sie zum WPtouch-Menü und klicken Sie auf Themen & Erweiterungen (1). Wählen Sie das gewünschte Thema und klicken Sie auf Setup (2):
Sobald das Setup abgeschlossen ist, können Sie die erforderlichen Änderungen und Korrekturen vornehmen. Die Plugin-Optionen ermöglichen die Durchführung einer ganzen Reihe von Aktionen, und die meisten von ihnen sind selbsterklärend.
So sieht das WPtouch Mobile Plugin-Menü aus:
Wenn alle Anpassungen abgeschlossen sind, speichern Sie die Änderungen und überprüfen Sie, wie die Website auf einem Desktop- und Mobilgerät angezeigt wird:
Erstellen separater URLs für Desktop- und Mobilgeräte
Der letzte Weg ist am zeitaufwendigsten, da Sie Folgendes benötigen:
1. Erstellen Sie eine entsprechende Subdomain für Ihre mobile Version, wie m.nctest.info .
2. Entwickeln oder kopieren Sie Site-Inhalte in den erstellten Subdomain-Verzeichnispfad.
3. Installieren und konfigurieren Sie ein Mobile Redirect Plugin.
HINWEIS: Wenn Sie sich für diese Option entscheiden, beachten Sie, dass die beiden Versionen Ihrer Website nicht automatisch synchronisiert werden, da es sich technisch gesehen um unterschiedliche Installationen handelt. Alle Änderungen, die Sie vornehmen, müssen für die andere Version repliziert werden.
Sobald die Subdomain erstellt und die Website angepasst wurde, installieren Sie das Plugin im Admin-Dashboard der Hauptwebsite.
Als Beispiel verwenden wir das Mobile Site Redirect Plugin.
1. Navigieren Sie zum Menü Einstellungen und klicken Sie auf Mobile Site Redirect.
2. Geben Sie die mobile URL ein, die Sie haben möchten. Überprüfen Sie bei Bedarf alle zusätzlichen Optionen.
3. Klicken Sie auf Einstellungen aktualisieren: 
HINWEIS: Wir bieten keine Code-Debugging- und Website-Entwicklungsdienste an. Dieser Artikel wird als eine Frage der Höflichkeit für Ihre Bequemlichkeit nur zur Verfügung gestellt.Sollten Sie Probleme mit der mobilen Version Ihrer Website haben, empfehlen wir Ihnen, sich an das Support-Forum zu wenden oder sich an den Website-Entwickler zu wenden.
Das war’s!