Vimeo Video iframe responsiv einbetten

Ein Vimeo oder YouTube Video “responsive” einbinden

Der Code:

Die Lösung:
Den “Embed” Code umgibt man mit einem zusätzlichen DIV Container. Wie z.B.:

<div class="responsive-video">
<iframe src="http://player.vimeo.com/video/47387431?title=0&amp
;byline=0&amp;portrait=0&amp;autoplay=0"
width="1600" height="900" frameborder="0" webkitAllowFullScreen
mozallowfullscreen allowFullScreen></iframe>
</div>

Über diesen kann man zunächst den iFrame ansteuern und in der Grösse anpassen:

.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Und dann in einem zweiten Schritt den Abstand des iFrames nach unten in das relative Verhältnis der Videogröße setzen:

.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}

Childtheme in WordPress erstellen

So erstellst du ein Childtheme in WordPress

Childthemes sind vor allem für Entwickler und Designer wichtig. Weitere Infos zu WordPress Themes und tolle Seiten, die damit erstellt wurden, findest du bei der WordPress Agentur bartmedien.

Vorteile des Childthemes

  • Bearbeiten des Designs verlustfrei möglich
  • Bearbeiten und Abänderung des Codes mittels overrides möglich
  • Änderungen werden bei Themeupdates nicht überschrieben

Schritt 1

Logge dich über den FTP auf deinem Server an. Navigiere zu dem Ordner „wp-content/themes“. Erstelle dort einen neuen Ordner. Der Name ist frei wählbar. Verwende z.B. „child-elternthemename“.

Das Elterntheme ist das Theme, welches du als Grundlage verwendest.

In den neu erstellten Ordner fügst du nun diese Dateien ein:

  • style.css
  • functions.php
  • evtl. einen Screenshot (screenshot.png). Ist aber nicht unbedingt notwendig.

Hier kannst du dir diese Dateien herunterladen.

Schritt 2

Öffne nun die style.css mit einem Texteditor. Füge den exakten Namen des Ordners deines Elternthemes ein und den exakten Namen des Ordners deines Childthemes.

Ansonsten muss du nichts abändern.

Rufe nun dein WordPress Backend auf klicke auf „Design-Themes“. Nun siehst du dein neues Childtheme. Aktiviere nun das Theme.

Schritt 3

Nun kannst du über „Design-Editor“ direkt auf das Childtheme zugreifen und Änderungen an der style.css vornehmen. Diese Änderungen werden bei einem Themeupdate nicht überschrieben.

Willst du Änderungen an weiteren php-Dateien vornehmen gehst du wie folgt vor.

Such dir die Datei heraus, welche du abändern willst. Ruf über den FTP den Ordner „wp-content/themes/elterntheme“ auf und lade diese php-Datei herunter. Lade die Datei nun in den Ordner deines Childthemes „wp-content/themes/childtheme“ hoch.

Rufst du nun wieder die Seite „Design-Editor“ im Backend auf, siehst du die Datei in deinem Childtheme. Nun kannst du wieder Änderungen über den Editor vornehmen, ohne dass diese bei einem Update überschrieben werden!

Google Analytics mit Plugin an WordPress anbinden

Google Analytics Dashboard für WP

Das Plugin Google Analytics Dashboard für WP eignet sich perfekt für die Anbindung von Googel Analytics an WordPress. Alles was du dafür brauchst, ist ein Google Analytics Konto.

Google Konto erstellen

Gehe auf diese Seite und erstelle ein neues Google Konto. Mit diesem Konto kannst du alle Dienst von Google nutzen.

Google Analytics Property erstellen

Logge dich nun in Google Analytics ein. Klicke auf „Verwalten“ und dann unter Property auf den Balken. Klick nun unten auf „Neue Property erstellen“.

property-erstellen

Füge nun den Namen der Property hinzu (z.B. den Namen deiner Webseite/Firma/Verein etc.). Unter URL gibst du die Adresse deiner Webseite ein. Stell noch die Zeitzone ein und klick auf „Tracking-ID abrufen“.

property-erstellen-tracking-id

Du hast nun eine neue Property erstellt. Im zweiten Schritt verbinden wir nun WordPress mit Google Analytics.

Analytics mit WordPress verbinden

Lade dir das Plugin Google Analytics Dashboard für WP herunter und installiere es in WordPress. Nach der Aktivierung erscheint im Menü links ein neues Menüelement namens „Google Analytics“

Klick nun auf „Plugin autorisieren“. Du musst dich nun mit Google verbinden und den Key abrufen. Kopiere diesen Key und füge ihn in das Feld im Plugin ein.

Nun kannst du deine zuvor erstellte Property auswählen und mit einem Klick verbinden.

Dir werden nun alle Daten auf Google Analytics auch im WordPress angezeigt.

 

In 2 Schritten dein WordPress Backend mit htaccess schützen

Der einfachste und beste Weg dein WordPress System zu schützen, ist der serverseitige Schutz über die .htaccess Datei.

Es gibt auch eine Vielzahl an Plugins, die den Zugang schützen. Jedoch haben diese alle das Problem, das hier WordPress den Angriff abwehren muss. Muss der Server den Angriff abwehren, wird das WordPress System geschützt und nicht überfordert. Ausserdem ist dieser Schutz bei weitem nicht so anfällig, wie ein vergessenes Update bei einem Plugin.

So schützt du dein WordPress wirklich

Schritt 1

Geh auf diese Seite und erstelle einen Benutzernamen und ein Passwort. Diese Info wird nun verschlüsselt. Kopiere diese Infos in eine neue leere Textdatei. Speichere die Datei unter dem Namen „.htpasswd“ ab.

Wichtig: Vergiss nicht den Punkt vor dem Dateinamen. Unter Windows und Mac, werden diese Dateien oft versteckt. Sei dir also sicher, dass du die Ordneroptionen bei Windows so eingestellt hast, dass du versteckte Dateien siehst. Unter Mac musst du einen Code im Terminal eingeben, um die versteckten Dateien zu sehen. Mehr Info hier.

Lade die Datei nun über den FTP in das WordPress-Verzeichnis deiner Webseite hoch. Du kannst auch einen extra Ordner für diese Datei erstellen.

Schritt 2

Gehe nun über den FTP auf deinen Server. Such die .htaccess Datei im WordPress Verzeichnis deiner Webseite. Lade dir diese Datei herunter und öffne sie mit einem Texteditor. Erstell sicherheitshalber noch eine Kopie dieser Datei, falls etwas schief gehen sollte. Füge nun folgenden Code hinzu:

<Files wp-login.php>
 AuthName "Admin-Bereich"
 AuthType Basic
 AuthUserFile http://www.deinewebseite.de/evtlPfad/.htpasswd  
 require valid-user
</Files>

<FilesMatch "(\.htaccess|\.htpasswd|wp-config\.php|liesmich\.html|readme\.html)">
 order deny,allow
 deny from all
</FilesMatch>

Bei AuthUserFile fügst du den Pfad zu deiner .htpasswd Datei hinzu. Lade die .htaccess Datei nun wieder auf deinen Server hoch.

Wenn du dich nun in das Backend deiner WordPress Seite einloggen willst, kommt dieses Fenster.

htaccess-schutz-wordpress

Hier musst du nun den Benutzernamen und das Passwort eingeben, welche du in der .htpasswd Datei hinterlegt hast. Das Passwort ist hierbei nicht das verschlüsselte, sondern das von dir gewählte.

Hast du die richtigen Zugangsdaten, kannst du dich im folgenden Schritt in dein WordPress einloggen.

Fehlerbehebung

Falls etwas schief gehen sollte, ersetzt du als erstes einfach die .htacces Datei mit deiner Sicherheitskopie, bzw. entfernst den neu hinzugefügten Code.

Oft liegt der Fehler im falschen Pfad bei AuthUserFile.

Lade die Datei „server-root.php“ hier unten herunter. Lade sie dann in das Hauptverzeichnis deiner WordPress Installation. Ruf nun die Seite auf: www.deinewebseite.de/root-server.php

Du erhältst nun den direkten Pfad deines Servers. Füge diesen an die Stelle AuthUserFile in deiner .htaccess Datei und ergänze noch den Ort an dem deine .htaccess datei liegt.

Lade nun die veränderte .htaccess wieder auf den Server hoch. Und probiere es erneut. Nun sollte die Authentifizierung funktionieren. Die Datei root-server.php kannst du nun wieder löschen.

Download der Dateien

Hier kannst du dir eine .htaccess, die .htpasswd und die server-root.php Datei herunterladen. Klick hier!

Hat dir die Anleitung geholfen?

WordPress Umzug – so geht’s richtig

WordPress Umzug mit UpdraftPlus

Die eigene WordPress Seite umzuziehen, ist auf den ersten Blick gar nicht so einfach. Gut, dass es dafür ein geeignetes Plugin gibt.

Das Plugin UpdraftPlus ist kostenlos und kann im WordPress Pluginverzeichnis heruntergeladen werden.

Es bietet zwei super Features:

  1. Automatisierte Backups des kompletten WordPress-Systems (auch auf anderen Servern)
  2. Die Möglichkeit WordPress umzuziehen

Bitte beachte, dass du folgendes für den Umzug benötigst:

  • alle Zugangsdaten zu deiner alten Webseite
  • FTP Logindaten und Zugang zur Datenbank deines neuen Hosters (für Installation des neuen WordPress Systems)

Der Umzug mit UpdraftPlus Schritt-für-Schritt erklärt

1. Installation

Als erstes musst du das Plugin instalieren. Gehe dazu im WordPress Backend auf „Plugins – Installieren“ und suche dann nach „updraftplus“.

updraftplus

Alternativ kannst du das Plugin auch hier herunterladen und über „Plugins – Installieren – Plugin hochladen (Button oben)“ in das WordPress laden.

Aktiviere das Plugin nach der Installation.

2. Backup erstellen

Als nächstes erstellst du das erste Backup. Klick dazu nach der Aktivierung auf den Link zu den Einstellungen.

updraft-einstellungen

Du siehst nun die Einstellungen von UpdraftPlus. Klick nun auf „Jetzt sichern“, um das erste Backup zu erstellen.

updraft-jetzt-sichern

Aktiviere im nächsten Fenster, beide Punkte. Dadurch sicherst du alle deine Dateien und deine Datenbank.

updraft-backup-erstellen

Nun dauert es, je nach Größe deines WordPress Systems, einige Zeit bis das Backup komplett ist.

Ist das Backup fertig, kannst du auf den Reiter „Existierende Sicherungen (1)“ klicken. Nun siehst du deine erste Sicherung.

updraft-exist-sicherung

3. Automatisierte Backups erstellen

Der Vorteil von UpdraftPlus, liegt in dem Erstellen von automatisierten Backups.

So erstellst du nun deine Automatismen. Klicke auf den Punkt „Einstellungen“. Hier kannst du nun auswählen, ob die Sicherungen manuell oder automatisch jeden Tag, wöchentlich, monatlich oder stündlich gemacht werden. Ich stelle hier meist wöchentlich ein und sichere mindestens 3 aufeinanderfolgende Sicherungen.

updraft-automatisierte-sicherung

Sobald mehr als 3 Sicherungen vorhanden sind, wird die älteste gelöscht und durch die neueste ersetzt. Alle Sicherungen werden auf dem eigenen Server in dem Verzeichnis „/wp-content/updraft“ gespeichert.

Ein weiterer Vorteil des Plugins ist, dass man die Sicherungen gleichzetig auf einem anderen Server speichern kann. Hier bietet UpdraftPlus die Möglichkeit das Backup z.B. auf Dropbox, Google Drive oder anderen Diensten zu speichern.

4. Das Backup herunterladen

Der nächste Schritt ist, das Backup herunterzuladen. Klicke nun auf „Existierende Sicherungen“. Hier siehst du alle 5 Pakete, die bei einem Backup erstellt werden:

  • Datenbank
  • Plugins
  • Designs (Themes)
  • Uploads (alle Medien)
  • Other (Sprachdateien)

Durch einen Klick auf die einzelnen Pakete, werden diese zum Download bereitgestellt. Lade die Pakete nun herunter. Klicke dazu auf „Auf Computer herunterladen“.

updraft-backup-herunterladen

Nun kannst du die Dateien des Backups auf deinen PC herunterladen.

5. Der Umzug von WordPress mit UpdraftPlus

5.1 Installation auf der Zielseite

Wir haben nun die Dateien der kompletten WordPress Seite inklusiv Datenbank heruntergeladen.

Nun installierst du zuerst ein komplett neues und leeres WordPress-System auf deinem neuen Hoster. Hier eine Übersicht über einige gute Hoster. Die Zugangsdaten, die du hier neu vergibst, werden später mit den Zugangsdaten deiner alten Webseite überschrieben.

Installiere als nächstes wieder das Plugin UpdraftPlus bei dieser neuen WordPress Installation. Das ist nötig, da wir im nächsten Schritt das Backup auf der neuen Seite einspielen wollen.

5.2 Backup wieder einspielen

Da du nun das Plugin UpdraftPlus wieder installiert hast, ist es momentan noch leer. Klicke auf „Existierende Sicherungen (0)“. Und nun auf den Link „Lade Sicherungsdateien hoch“.

updraft-sicherungen-hochladen

Wähle nun alle 5 Pakete deines Backups aus, welches du von der alten Seite heruntergeladen hast. Die Pakete werden nun hochgeladen.

Nachdem die Dateien erfolgreich hochgeladen wurden, siehst du nun eine existierende Sicherung. Klicke nun auf den Button „Wiederherstellen“ und wähle alle 5 Pakete aus. Klick anschließend auf „Wiederherstellen“.

updraft-sicherung-wiederherstellen

Je nach Größe des Backups, dauert es bis das Backup hergestellt ist.

5.3 Letzt Änderungen vornehmen

Ist die Sicherung erfolgreich kann es sein, dass dich ein Klick auf eine fehlerhafte Seite umleitet, oder wieder auf die alte Seite zurückverlinkt. Das ist ganz normal, da die komplette Datenbank und alle Einstellungen der alten Webseite mit übernommen wurden.

Daher müssen wir noch eine Änderung in der Datenbank vornehmen. Logge dich also nun in die Datenbank der neuen Webseite (phpMyAdmin) ein.

Such als erstes nach der Tabelle „wp_options“.

wp-options-datenbanktabelle

Klick auf diese Tabelle. Nun bekommst du eine Übersicht über alle Felder in dieser Tabelle. Such als nächstes die Zeilen „siteurl“ und „home“. Diese Bezeichnungen findest du in der Spalte „option_name“.

wp-options-siteurl-home-url

In der Spalte „option_value“ steht in deinem Fall noch die Adresse deiner alten Webseite (Hier steht treasurezone.de, weil das ja die Adresse meiner Seite hier ist).

Klicke nun bei „siteurl“ auf links auf den Stift „Bearbeiten“. Nun kannst du die Spalte „option_value“ bearbeiten. Trage hier die Adresse deiner neuen Webseite ein und speichere (klicke auf „OK“). Das selbe machst du nun bei „home“. Auch hier trägst du die selbe Adresse ein.

datenbank-abaendern

Nun kannst du deine Webseite unter der neuen Adresse aufrufen. Das Frontend und das Backend sollten jetzt ganz normal erreichbar sein.

Einloggen kannst du dich nun wie gewohnt, mit den Zugangsdaten deiner alten Webseite.

Hat dir die Anleitung geholfen? Hattest du Probleme beim Umzug?

 

Die besten WordPress Plugins

Hier zeige ich dir meine beliebtesten WordPress Plugins. Alle Plugins sind kostenlos.

Die besten Hoster für dein WordPress-System

Alfahosting

Alfahosting bietet Hosting für Webseiten an. Die Vorteile bei Alfahosting sind:

  • 1-Click Installation von WordPress
  • Günstige Pakete (z.B. Multi L für 2,99€/Monat)
  • 2 Inklusivdomains
  • Bis zu 64 MB Memory Limit
  • 15 GB Speicherplatz

Ich verwende Alfahosting schon seit 10 Jahren und bin damit total zufrieden. Der Service ist super und sehr hilfsbereit. Es gab auch noch nie einen Serverausfall.

Hier kannst du dich über die Hostingpakete informieren: Alfahosting

One.com

Das tolle bei One ist, das es ein ganzes Jahr kostenlos ist! Danach kostet es 1,79€/ Monat.

Du erhältst:

  • 1 Datenbank
  • 15GB Speicherplatz
  • SSL
  • und 512MB Ram
  • 1-Click Installation für WordPress

Schau dir hier das tolle Angebot von One.com an.

Für einfache Blogs und Webseiten ist One.com die beste Wahl. Für komplexere Systeme oder mehrere Seiten, empfehle ich uneingeschränkt Alfahosting!