wordpress

WordPress lokal unter Mac OSX mit MAMP oder Windows XAMPP oder WAMP installieren

22. Juli 2016adminWebdesigndatenbank, installieren, lokal, mamp, mysql, phpmyadmin, webdesign, wordpress

Für den ein oder anderen unter uns hört sich die Aufgabenstellung „lokal ein Server aufsetzen und ein CMS installieren“ ähnlich unkompliziert an wie „Steuererklärung machen“ oder „von Windows ME auf Windows 8 upgraden“. Tatsächlich ist das ganze aber mit wenigen Klicks hier und einigen Eingaben dort erledigt. Und das Ganze geht mit noch ein paar Klicks weniger mit Hilfe von MAMP.

MAMP steht für „Macintosh, Apache, MySQL and PHP“. Dabei handelt es sich um eine kleine Max OSX Anwendung die auf Knopfdruck eine typische Serverumgebung mit samt einer bereits eingerichteten Datenbank zur Verfügung stellt.

1. Schritt: MAMP installieren

Die kostenlose MAMP Version gibt es hier zum Herunterladen. Dabei wird auch gleichzeitig die kostenpflichtige PRO Version heruntergeladen. Deren erweiterten Versionsumfang benötigt man jedoch nicht für eine einfache WordPress Instanz.
Die heruntergeladenen Datei mit einem Doppelklick starten und MAMP installieren.

Unter:

programme/mamp/

findet sich dann die Startdatei, ebenfalls mit dem Namen „mamp“. Diese ausführen.
Ein Fenster erscheint mit der Option „Server starten“…und schon ist alles soweit. MAMP leitet direkt auf eine „Willkommen“ Seite weiter die alle wichtigen Informationen und Links enthält. Neben dem Host, User und Passwort der Datenbank unter anderem auch einen Link zur lokalen PHPMyAdmin Oberfläche mit der sich nach belieben Datenbanken anlegen lassen.

2. Schritt: WordPress installieren

Die aktuelle Version von WordPress herunterladen und entpacken. Jetzt in dem Verzeichnis:

programme/mamp/htdocs

ein Unterverzeichnis erstellen. Beispielsweise mit dem Namen „wordpress“ und alle WordPress Dateien hier hin kopieren.
Abschließend muss das WordPress Verzeichnis im Browser aufgerufen werden. Mit den Standardeinstellungen und dem oben neu angelegtem Verzeichnis würde dies über folgende URL klappen:

http://localhost:8888/wordpress/

Hier beginnt die gewohnte WordPress Installation mit der Hinterlegung der Seiten- und Datenbank Informationen.
Da MAMP bei der Installation bereits eine leere Datenbank anlegt, können diese Daten einfach übernommen werden und es muss keine neue Datenbank erstellt werden. Die Zugangsdaten sind (falls nicht manuell geändert):

Host: localhost
Benutzername: root
Passwort: root
Datenbank Name: mysql

Exkurs: MySQL Datenbank unter phpMyAdmin einrichten

MAMP stellt Euch zum bearbeiten Eurer lokalen MySQL-Datenbanken auf dem Mac sogar zwei Tools dafür bereit. Diese Links findet Ihr wie oben bereits erwähnt unter Tools. Das wäre zum einen phpLiteAdmin und phpMyAdmin. Ich kann Euch nur phpMyAdmin wärmstens empfehlen, da es ein sehr mächtiges Werkzeug zum bearbeiten von MySQL-Datenbanken ist.

Um WordPress überhaupt lokal auf Eurem Mac installieren zu können müssen wir noch 2 Dinge einrichten.

1. eine Datenbank in phpMyAdmin erstellen
2. Benutzer einrichten, der die Rechte auf die Datenbank hat

Um die MySQL-Datenbank zu erstellen klicken wir zu allererst auf den Reiter „Datenbanken“. Wie auf dem Screenshot sehr schön zu sehen, können wir nun die Datenbank in dem dafür vorgesehenen Feld einen Namen vergeben und auf anlegen klicken um diese zu erstellen. Das DropDown Feld belassen wir in der Standard-Einstellung. Die Standard-Einstellung wird in den meisten Fällen völlig ausreichen.

Als nächstes wollen wir für die eben erstellte Datenbank einen User einrichten. Natürlich kann man auch mit dem Standard-User root und dem Passwort root arbeiten, besser ist es aber einen speziell dafür eingerichteten Nutzer mit eigenem Passwort zu verwenden. Dazu wechseln wir oben zum Reiter Benutzer und suchen den Link um einen Benutzer zu erstellen. Hierzu wählen Sie einen Benutzernamen, wählen im DropDown Feld Host lokal aus und vergeben ein Passwort. Das können Sie selbst wählen oder von phpMyAdmin generieren lassen. Anschließend klicken Sie auf OK unten rechts. Wenn Sie sich mit phpMyAdmin bereits bestens auskennen, können Sie natürlich die individuellen Einstellungsmöglichkeiten nutzen.

Nun haben wir eine Datenbank und einen Benutzer erstellt um WordPress lokal auf dem Apache und mySQL Server installieren zu können.

WordPress installieren

Da wir WordPress lokal installieren wollen, entfällt das meist sehr langwierige Hochladen per FTP auf den Server. Lokal geht dies um einiges schneller 😉

Schritt für Schritt Anleitung um WordPress zu installieren.

1. Erstelle einen neuen Ordner im htdocs Verzeichnis Deiner MAMP Installation. Dort kannst Du alle Deine zukünftigen, lokalen Projekte ablegen die Du später mal live schalten willst, oder auch nur zum testen dort ablegen. Der Name Deines Ordners wird später Deine Website URL sein, wie in Schritt 3 beschrieben.
2. Ich habe in meinem MAMP Verzeichnis immer die neueste WordPress Version dort liegen um durch einfaches kopieren des ungezippten WordPress Ordners schnell ein Installationspaket zur Verfügung zu haben. Den Ordner kannst Du anschließend einfach zu Deinem Projektnamen umbenennen. Wir haben im ersten Schritt ja bereits einen Ordner erstellt, deshalb brauchen wir nur die Dateien die im WordPress Ordner liegen in Deinen Projektordner kopieren.
3. Jetzt öffnest Du Deinen Browser und öffnest die URL localhost:8888/DeinProjektordner/wp-login.php und der nun erscheinende Installationsassistent von WordPress führt Dich Schritt für Schritt durch die berühmte 5min Installation.

Das wars! 😉 WordPress ist nun Hilfe von MAMP lokal auf Deinem System installiert und kann verwendet werden. Viel Spaß!

If you have some technical background, you can skip the detailed steps in this tutorial. Here are the simplified steps on how to install WordPress on a local computer:

Install a local server (Mac: MAMP, PC:XAMPP or WAMP).
Create a new database.
Download WordPress from wordpress.org and extract the files to a new folder under the htdocs folder.
Rename the wp-config-sample.php file to wp-config.php and update the database details according to your local server.
Run wp-admin/install.php and follow the instructions to install WordPress.
Done!

Let’s Begin…

Before you start, let’s look at the requirements to run WordPress:

PHP 4.3+
MySQL 4+ Database Server

1. Install a Local Server

In order to run any PHP/database application on a local computer, you need a local host (ie. Apache + MySQL). For Mac, use MAMP. For PC, use XAMPP or WAMP.

I’m using Mac here, so I’m going to install MAMP. Go to mamp.info, download and install MAMP.

2. Create a New Database

After you’ve installed MAMP, run it and it should take you to the start page. Now click on phpMyAdmin. In the phpMyAdmin page, create a new database (eg. wordpress).

3. Download WordPress

Go to wordpress.org and download the latest build of WordPress. Go to the htdocs folder (where you installed the MAMP), extract the wordpress.zip to a new folder (eg. mysite).

4. Update wp-config.php File

In the folder, rename the wp-config-sample.php to wp-config.php. Open wp-config.php and update the database details (db_name, user, password, host) according to your local server.

5. Run install.php

With your browser, go to http://localhost:8888/mysite/wp-admin/install.php and follow the instructions to install WordPress.

image-optimization-plugins-thumbnail_wi1imf

The 6 Best WordPress Image Optimization Plugins Compared

11. April 2016adminWebdesign10, 50, 64, account, after, alle, also, alte, alter, alternative, alternatives, auto, backup, blog, button, cent, cloud, copy, copyright, core, detail, details, DR, edge, ende, esc, features, file, files, final, folder, format, forms, free, full, handy, ical, id, image, install, installation, interne, internet, ip, last, library, little, look, magic, mail, media, menu, mobile, mode, OK, open, optimization, option, order, original, over, page, perfect, performance, pixel, plugin, plugins, plus, premium, process, profil, quick, rang, reduction, resize, reste, script, server, setup, should, simple, size, smart, smartphone, source, speed, stick, tage, test, things, time, tool, tools, type, version, webdesign, website, websites, when, width, will, window, wordpress, your

Compelling content is often not enough. Every visitor will use different criteria to judge whether your site is worth their time, but few issues can sink you as quickly as slow load times.

There are a lot of factors which can impact your loading times, and using high-resolution images is one of them. Most of us have experienced what it’s like to navigate through a website full of images that take forever to load – an experience made even more frustrating if you’ve been using the internet long enough to remember when speeds weren’t quite so snappy.

These days, the average fixed internet connection can easily handle high-resolution images, but smartphone usage continues to grow, and mobile connections aren’t nearly as reliable. With that in mind, let’s take a look at six WordPress image optimization plugins that can ensure your site is quick to load!

1. EWWW Image Optimizer

After installing and setting up EWWW Image Optimizer, it’ll automatically optimize any images you upload to your blog as long as they’re either JPG, PNG, or GIF files. It also includes a function to optimize your entire media catalog, in case you already have lots of images on your site.

One of the advantages of EWWW Image Optimizer is that the optimization process takes place within your own servers by default, instead of connecting to a third party service. This means your optimization tasks will require less time, which can come in handy when tackling large media libraries, since regular-sized files (<1mb) should take a few seconds at the most.

This local optimization process is made possible by including several pre-compiled binaries, which must be installed from your local WordPress folder. This means some users may run into difficulties completing the setup process if they don’t have permission to execute the files.

To combat this potential issue, EWWW Image Optimizer also offers a cloud optimization feature, which while taking a bit longer, enables you to bypass this setup process. It’s also worth noting that while the plugin uses lossless optimization methods by default, it also enables you to apply lossy reductions for even bigger reductions in file size.

2. WP Smush

WP Smush is WPMU DEV’s image optimization plugin, available in both free and premium formats. As is common with this sort of plugin, any images you upload to your WordPress site will be automatically optimized (or ‘smushed’, as this plugin’s developers like to call it).

The plugin also packs a bulk optimization option, which as its name implies, enables you to tackle multiple tasks at once – perfect if you’re looking to compress your image backlog after installing the plugin. This bulk option is limited to 50 files at a time in the free version of the plugin.

You can also optimize images individually by heading over to your Media Library, clicking on whichever file you want to compress, and clicking on the Smush option on the Attachment Details window. This option can come in handy if for some reason you’d prefer not to use the bulk optimization option and have only a few images you’d like to compress.

By default, WP Smush uses lossless optimization techniques, but its pro version includes a Super-Smush option which optimizes each image multiple times using lossy compression techniques. This method can allegedly cut filesizes almost by half with a minimal loss of quality, but for the purposes of our article, we’re going to be sticking with the free version of the plugin.

3. Kraken Image Optimizer

The Kraken Image Optimizer enables you to optimize PNG, JPG, and GIF files through its own API. To set up the plugin, you’ll need to sign up for a free account at Kraken.io’s homepage in order to be provided with your own API and secret keys (which can be used across multiple WordPress installations, if so desired).

By default, the Kraken Image Optimizer will optimize your images using an ‘intelligent lossy’ compression profile, which is designed to yield drastic savings without notably impacting image quality. However, you can also manually enable a lossless option on its settings page. On top of these two default profiles, you can set a specific value for the quality of your JPG images, which ranges from 25 to 99 in case you want to test things out a little. During our own tests, we didn’t notice a perceivable difference between the outputs of either mode, but your mileage may vary.

This plugin also includes a useful option which enables you to establish a maximum resolution for your images, so that you won’t need to manually resize them when uploading in order to avoid breaking your pages. EXIF metadata can also be preserved, as the plugin lets you choose which attributes to keep, and finally, you can set a cap on the number of images to be optimized during a bulk process (so as to avoid hitting your requests limits).

4. ShortPixel Image Optimizer

ShortPixel not only scores well when it comes to compression, it also packs a nice interface. After installing and activating the plugin, every JPG, PNG, and GIF you upload will be automatically optimized, and this plugin doesn’t enable you to turn off this option at all, as most others do.

A bulk optimization tool is included, and individual images can be compressed by opening your Media Library in the List View format, where each file will appear with an individual Optimize Now button alongside it.

ShortPixel enables you to choose between lossy and lossless compression methods, using the former by default. It optimizes all of the image thumbnails created by WordPress during the upload process, is capable of removing EXIF data (or preserve it you prefer), can establish a maximum resolution for your images, and best of all, it automatically saves a backup of every image you upload to a new folder.

In order to set up the ShortPixel plugin, you’ll be prompted to enter an API key during the activation process, which is provided for free by signing up with your email to their subscription list and doesn’t require any additional information. A free signup entitles you to 100 image compressions per month, and credits for additional tasks can be purchased separately or earned by referring new users to the service.

5. Compress JPG & PNG Images

Compress JPG & PNG Images is rather more drastic than the other plugins we’ve mentioned on this list when it comes to image optimization. It employs only lossy compression methods, which make for a drastic reduction in filesizes while mostly preserving the quality of the images undergoing the procedure.

The plugin doesn’t offer many configuration options in its settings page, since you can’t modify the compression methods it uses. However, you can choose maximum resolutions for your uploaded images, pick exactly which sizes you want to compress (i.e. thumbnail, medium, etc.), and whether or not to preserve the copyright information of each file if available.

Despite these limitations, Compress JPG & PNG images performs very well when it comes to the optimization process, and our tests didn’t show any obvious reduction in quality of the images after they were processed.

6. Optimus

While Optimus performs admirably when it comes to the actual optimization process, the free version of this plugin includes a rather stifling 100kb file size cap on the images you can process, which essentially renders it a glorified demo.

That being said, Optimus has a simple settings menu, which makes it a good choice if you’re looking for sheer performance and are not interested in fine-tuning the details of the optimization process.

By default, Optimus will (pardon the pun) optimize images as they’re uploaded, but it won’t show the compression details on the Attachment Details window of each file, or in the menu, so you’ll have to manually compare file sizes in order to notice any difference.

This plugin won’t only optimize the files you upload, but also the multiple sized images that WordPress automatically creates for these media files (i.e. thumbnail, small, medium, and large).

Let’s Put Them to the Test

So far we’ve covered each plugin’s individual features, as well as their pros and cons. Now it’s time to see how they actually fare against each other when it comes to their intended purpose: image optimization. We’ve split the actual testing between JPG and PNG files since they’re the most commonly used types of graphic files on most websites, and chosen a single image with an average file size for each.

To get the best possible results, we’ve chosen lossy image optimization when possible, but that proved impossible with WP Smush and Optimus, due to a lack of alternatives. Despite the disparity in the results obtained from these particular plugins, we decided it would be best to include them alongside the rest for the sake of completion, since they remain some of the most popular image optimization tools available for WordPress.

We’d like to remind everyone that these results are far from exhaustive. Your mileage may vary depending on which particular image you choose to optimize, and these findings should be viewed only as an example of how each plugin performs individually.

JPG Optimization

Our JPG test subject.

Plugin	Original File Size	Optimized File Size	Optimization %	Compression Method
EWWW Image Optimizer	531 KB	70.9 KB	87%	Lossy
WP Smush	531 KB	488.1 KB	6.3%	Lossless
Kraken Image Optimizer	531 KB	61.98 KB	88.31%	Lossy
ShortPixel Image Optimizer	531 KB	81 KB	85%	Lossy
Compress JPEG & PNG Images	531 KB	64.9 KB	88%	Lossy
Optimus	69 KB	52 KB	24.64%	Lossless

As we can see, the plugins which applied a lossy optimization method obtained roughly similar scores across the board, with Kraken Image Optimizer and Compress JPEG & PNG Images pulling ahead by a very small margin. Due to its slight edge when it comes to the compression percentage (plus all of its additional features), we’re going to recommend you go with Kraken Image Optimizer if you use mostly JPG files on your site.

Compress JPEG & PNG Images comes rather close as well, but it simply lacks the variety of features that Kraken includes. However, if you’re not interested in in-depth configuration options and only want a potent optimization tool, it might be right up your alley.

PNG Optimization

Our PNG test subject.

Plugin	Original Filesize	Optimized Filesize	Optimization %	Compression Method
EWWW Image Optimizer	841 KB	240.8 KB	72.1%	Lossy
WP Smush	841 KB	Not applicable	Not applicable	Lossless
Kraken Image Optimizer	841 KB	217.47 KB	74.13%	Lossy
ShortPixel Image Optimizer	841 KB	200 KB	71%	Lossy
Compress JPG & PNG Images	841 KB	218.8 KB	75%	Lossy
Optimus	69 KB	63 KB	8.6%	Lossless

In this round, ShortPixel Image Optimizer took the lead with a slight advantage over the winners of the last section – once again with no noticeable reduction in the quality of the optimized images.

ShortPixel was one of our favorite plugins to use during the testing phase of this list due to its intuitive settings menu, which included solid descriptions for each feature. Its only downside is that it limits you to a maximum of 100 images per month and you’re required to purchase credits for any additional optimization tasks – same as the runner up, Compress JPG & PNG Images.

Conclusion

While optimizing your images won’t make your site magically load in milliseconds, it’s one of those things that show you take every detail into consideration. Even if the resources you save aren’t substantial to you as far as bandwidth goes (and let’s face it, bandwidth is pretty cheap), visitors with slow connections will definitely be thankful for it.

Just keep in mind that while we may have tested all of these plugins with different images, you will find that the results vary depending on the image you use. If you want to tackle image optimization seriously for your own projects, we recommend that you take the time to individually test some of our frontrunners to see for yourself just which plugin you prefer.

WordPress auf eine neue Domain übertragen / umziehen. So geht’s richtig.

7. April 2016adminWebdesignaber, absolut, admin, advanced, alle, also, alte, alten, anbieter, andere, anderen, anleitung, anpassen, arbeit, arbeiten, auch, aufruf, backup, beim, bekomme, bekommen, bereits, beste, bestehende, besten, bestimmt, bestimmte, blog, blogs, browser, button, computer, dann, darum, dateien, dateiname, dateinamen, daten, deine, deinem, deines, deren, detail, dienste, diese, doch, domain, downloaden, DR, durch, ebene, ebenen, echten, editor, eigentlich, eine, einem, einen, einer, eines, einfach, einfache, einfachen, einige, einmal, einrichten, einstellungen, Eintrag, eintragen, ende, entscheiden, erfolgreich, erhalten, ermitteln, erst, erste, esc, export, exportieren, fade, fahren, fall, fehler, fenster, fertige, file, finde, findest, findet, folgen, format, funk, funktion, funktionieren, funktioniert, ganz, GB, geben, geht, gemacht, genau, gleiche, gt, gute, gzip, haben, halten, hauptverzeichnis, hier, hilfe, id, ihre, immer, import, importieren, install, installation, installiere, installieren, interne, internet, ip, jahr, jede, jedes, jetzt, kann, kleine, kleinen, kleiner, klick, komme, kommen, kommentare, kommt, komplett, komprimierte, kopie, kopieren, kosten, kostenlos, kostenlose, kostenlosen, kunden, laden, leere, leicht, letzten, liebe, linux, lokale, lokalen, macht, mehr, mein, meine, meinem, mich, minute, minuten, mittel, muss, nach, namen, netz, neue, neuen, nicht, noch, nutzen, oder, OK, option, order, PC, pfad, pfade, plugin, plugins, problem, probleme, problemlos, program, programm, projekt, provider, RAM, raus, rechte, rechten, reicht, richte, richtig, rund, schluss, schnell, schnelle, schneller, schon, schritt, seite, seiten, selber, server, setzen, shell, sich, sicher, sicherung, siehst, sind, sogar, soll, sollte, sondern, space, speicher, speichern, speichert, start, startest, stellen, stellt, suche, suchen, system, teil, test, text, textdatei, texte, texteditor, tool, transfer, TV, umziehen, umzug, unter, URL, version, verwenden, verzeichnis, verzeichnispfad, viel, viele, webdesign, webseite, webspace, wechsel, weitere, welche, welches, wenn, werden, werte, wieder, will, wird, wirklich, wordpress, wordpress-blog, zahl, zeichen, zeigt, zeiten

Geniales Tool, das alles direkt per FTP und Assistent erledigt: Migrate Guru

auf der Quellseite das Plugin installieren
Ziel-Server einen FTP-Zugang einrichten, der direkt auf die Root zeigt
künftige URL und FTP-Zugangsdaten im Migrate-Guru auf der Quellseite eintragen
als Destination-Path die Root eintragen: /

Ein anderes gutes Tool: BackupBuddy
(BackupBuddy hat mir übrigens auch schon geholfen einen WordPress-Fehler – Java – zu finden, welchen ein anderes, aktiviertes Plugin verursacht hat. Ansonsten mit P3 Profiler oder Query Monitor nach Fehlern suchen…)

Ein Umzug deines WordPress Blogs steht an, du weißt aber nicht wie du das anstellen sollst? Ich zeige dir, wie du deinen Blog richtig von einem Server auf den Anderen umziehst.

Vielleicht hast du schon einmal deinen Blog oder eine andere WordPress Installation umziehen müssen. Zum Beispiel wenn du eine Testinstallation oder ein Kundenprojekt von deinem lokalem Webserver auf den Webspace im Internet übertragen musst.

Dabei wirst du bestimmt schon mitbekommen haben, das es nicht ganz so einfach ist ein fertig konfiguriertes WordPress zu übertragen. Eigentlich sind ja nur die Dateien und die Datenbank auf den Server zu übertragen. Anschließend die Zugangsdaten der Datenbank in der Konfiguration anpassen und fertig. So einfach ist es bei WordPress leider nicht! Der Teufel steckt hier im Detail.

Bei anderen CMS Systemen wie Drupal mag das funktionieren, bei WordPress aber leider nicht. Darum habe ich ewig im Netz recherchiert um eine wirklich umfassende Lösung zu entwickeln, die auch wirklich funktioniert.

Die Probleme eines WordPress Umzugs

Es gibt viele Anleitungen für im Internet, wie man einen Server-Umzug oder Domain-Umzug von WordPress macht. Dort ist immer die Rede davon, das du das Datenbank-File, welches du per phpMyAdmin gesichert hast, mit der „Suchen/Ersetzen“-Funktion eines Texteditors die alte Domain mit der Neuen ersetzt.

So habe ich das auch immer probiert und es hat nicht funktioniert. Ich musste anschließend immer die Theme Einstellungen neu einrichten, oder einige Plugins haben nicht mehr funktioniert und mussten komplett neu eingerichtet werden. Also bin ich selber dem Problem auf den Grund gegangen.

Der Übeltäter eines WordPress Server-Umzugs oder Domain-Umzugs oder sogar nur ein Domain-Wechsel ist die Datenbank. Genauer gesagt, die Art und Weise wie WordPress die Daten dort ablegt. WordPress speichert die vollen Verzeichnispfade, sowie die Domain mehrfach serialisiert in den Einstellungen. Diese müssen vor dem Einspielen auf den neuen Server im der Datenbank Datei auf die neuen Werte korrigiert werden.

Und es kommt noch schlimmer. WordPress speichert diese Einstellungen zusätzlich noch serialisiert. Da heißt die Anzahl der Zeichen wird zusätzlich auch gespeichert. Dadurch funktioniert ein einfaches Suchen und Ersetzen funktioniert also nicht.

Wenn ich jetzt z.B. die Domain. in der Datenbank durch http://meine-neue-seite.de ersetze, stimmt zwar die Domain, aber die Anzahl der Zeichen hat sich geändert. Hier müsste dann anstelle einer 24 muss dort dann eine 29 stehen, wie nachfolgendes Beispiel zeigt.

Serialisierte Zeichenketten in WordPress

Diese Änderungen müssen nicht nur für die Domain erfolgen sondern auch für die Einträge in der Datenbank, wo WordPress den Pfad des Verzeichnis gespeichert hat. In meinem Fall waren das bei einer sehr großen WordPress Webseite, mit ca. 60 Plugins ca. 13000 Einträge. Wie du siehst, das kann man sich nicht mehr per Hand erledigen.

Nachdem ich dir jetzt erläutert habe, wo die Probleme bei einem WordPress Umzug liegen, zeige ich dir im nächsten Abschlitt die Lösung dieser Aufgabe.

So ziehst du dein WordPress richtig um

In dieser Schritt für Schritt – Anleitung zeige ich dir wie du dein WordPress sicher und einfach auf den neuen Webspace überträgst. Und anschließend funktionieren auch wirklich alle Einstellungen wie gewohnt.

Schritt 1

Als erstes lädst du alle Dateien deiner WordPress-Installation mit einem FTP-Programm von dem Server auf deinen lokalen Computer herunter. In dem Fall meine ich natürlich die Quell-Installation. Ich verwende dafür das kostenlose FTP Programm FileZilla. Du kannst dafür aber auch jedes andere FTP-Programm verwenden.

Das kann je nach Größe deines WordPress Blogs einige Zeit in Anspruch nehmen. Bei mir waren es nach ca. 2 Jahren ca. 4 GB. Sicherlich auch, weil hier einige Komplettsicherung meines Backup-Plugins dabei waren.

Schritt 2

Jetzt installierst du in deinem bestehenden und noch lauffähigen WordPress-Blog das Plugin „WP Migrate DB„. Dieses Plugin findest du wie gewohnt über die Plugin Suche von WordPress oder in im offiziellen Plugin Directory auf Wordpress.org.

Das Plugin gibt es in einer kostenlosen und in einer kostenpflichtigen Version. Die kostenlose Version reicht aber für deinen Umzug aus und es leistet sehr gute Dienste. Nach erfolgreicher Installation findest du das Plugin unter dem Menüpunkt „Werkzeuge -> Migrate DB“.

WordPress Plugin WP Migrate DB

„WP Migrate DB“ zeigt dir auf der Migrate-Seite die derzeitigen Einstellungen für deine Domain und deinen Server-Pfad in den feldern unter „Find“. Hier befindet sich deine WordPress Installation derzeitig. Jetzt musst du nur in den rechten Feldern unter „Replace“ den neuen Domain-Namen und den neuen Server-Pfad eintragen. Die Felder für die URL und den Pfad sind bereits aufgeführt.

WP Migrate DB – Pfade eintragen

Wenn sich zum Beispiel deine Domain oder der Server-Pfad nicht ändert, musst du hier in den Replace-Feldern die gleichen Daten eintragen, wie bei „Find“. Den Server-Pfad des neuen Servers erfährst du aus der PHPinfo.

Leere Textdatei unter phpinfo.php abspeichern und folgendes einfügen:

<?php // Show all information, defaults to INFO_ALL phpinfo(); ?>

Danach per FTP-Client auf den Server übertragen und via http://www.meine-seite.de/phpinfo.php aufrufen.

Den absoluten Pfad findet man unter dem Punkt:

_SERVER[„DOCUMENT_ROOT“]

Exkurs: Den absoluten Pfad ermitteln

Für einige arbeiten im Internet ist es erforderlich den absoluten Pfad (DOCUMENT ROOT) zu ermitteln, am einfachsten ist dies mit einer einfachen PHP – Datei. Dazu öffnen wir einen ganz normalen Texteditor (nicht Word!), und kopieren den nachfolgen Code in diese leere Textdatei und speichern diese Datei unter dem Dateinamen absoluter-pfad.php ab.

Hier der Code:

<?php $pfad = getcwd();
echo $pfad;
?>

Nun laden wir diese Datei mittels FTP in das Verzeichnis, von dem wir den absoluten Pfad ermitteln wollen, nach dem hochladen rufen, wird die Datei absoluter-pfadt.php im Browser auf, also www.ihre-domain.de/absoluter-pfad.php oder www.ihre-domain.de/verzeichnis-xyz/absoluter-pfad.php und bekommen nun den absoluten Pfad angezeigt.

Absoluten Pfad ermitteln auf einem kleinen Umweg

Das funktioniert am einfachsten über das Anti-Malware-Tool von GOTMLS.NET. Beim Scannen wird das Stammverzeichnis unter „Scan Details“ angezeigt. (Außerdem holt man sich keine Malware auf den neuen Server 😜 )

WP Migrate DB – Erweiterte Einstellungen

Im unteren Bereich kannst du weitere Einstellungen anhaken. Dazu musst du den Bereich „Advanced Options“ aufklappen. Hier hast du zusätzlich die Möglichkeit zu entscheiden, ob du bestimmte DB-Einträge, wie Revisionen, Spam.Kommentare oder temporär gecashte Daten nich mit exportieren möchtest. Damit kannst du dein Export-File kleiner halten. Jetzt solltest du noch den Haken bei „Compress file with gzip“ rausnehmen, damit du ein unkomprimiertes Datenbank-File erhälst.

Anschließend klickst du auf den Button „Migrate“ und startest damit den Export. Jetzt öffnet sich ein Fenster, welches dich über den Export-Fortschritt der Datenbank informiert. Je nach Größe deiner Datenbank kann dieser Vorgang einige Minuten in Anspruch nehmen. Im Anschluss kannst du die fertige Export-Datei auf deinen PC downloaden.

WP Migrate DB – Exportvorgang

Schritt 3

So, jetzt musst du nur noch das geänderte Datenbank-File in die neue MySQL Datenbank importieren. Das machst du am besten wieder über phpMyAdmin. Wenn die Datei zu groß ist um Sie mit phpMyAdmin zu importieren, kannst du zusätzlich den MySQL Dumper installieren und dieses Tool für den Import der WordPress-Datenbank nutzen.

WP Datenbank über phpMyAdmin importieren

Schritt 4

Als letzten Schritt musst du natürlich noch die Datei wp-config.php anpassen. Das hatte ich noch vergessen und der Tom hat mich in den Kommentaren darauf aufmerksam gemacht. Die Datei wp-config.php findest du im Hauptverzeichnis deiner WordPress-Installation. Hier musst du jetzt die Zugangsdaten deiner neuen Datenbank eintragen. Diese hast du vorhin schon einmal benutz, wo du dich in die phpMyAdmin Oberfläche deines neuen Providers eingeloggt hast. Dein Provider stellt dir die vollständigen Zugangsdaten zur Verfügung.

Zugangsdaten in der wp-config.php anpassen

Tipp zum MySQL Import

Viele Webspaces haben auch einen SSH Zugang. Damit kannst du natürlich die Datenbank-Sicherung auch per Linux-Shell in die neue Datenbank einspielen. Der Vorteil ist hierbei, das du nicht an irgendwelche Ausführzeiten von PHP gebunden bist. Meistens geschieht das komplett fehlerlos und wesentlich schneller als.

Als letztes musst du jetzt gegebenenfalls noch die Domain selber auf den neuen Server umziehen. Wenn du deinen Blog mit einer neuen Domain betreiben willst, entfällt dieser Punkt natürlich. Den Domian-Transfer startest du über die Admin-Oberfläche deines Hosting-Anbieters. Wie das da funktioniert erfährst du auf den Hilfe-Seiten deines Hosters.

Jetzt sollte dein WordPress Blog auf dem neuen Server wieder so funktionieren, wie auf dem alten Webserver. Alle Einstellungen der Plugins sowie des Themes sind erhalten geblieben und funktionieren wieder wie gewohnt.

Fazit

Mit ein klein bisschen Vorbereitung ist es problemlos möglich einen WordPress-Blog auf einen anderen Server umzuziehen. Ich habe diese Schritt für Schritt Anleitung entwickelt, weil ich selber sehr oft damit Problem hatte.

Wenn dir diese Anleitung weiter geholfen hat, schreibe mir doch einfach einen kleinen Kommentar unter diesem Beitrag. Ich würde mich sehr freuen zu erfahren, wie es dir beim WordPress-Umzug ergangen ist.

Elemente mittels CSS unsichtbar machen / in WordPress ausblenden bzw. verstecken

29. März 2016adminWebdesignaber, alle, also, alte, alten, annehmen, anpassen, anwendung, arbeit, archiv, archive, auch, ausblenden, ausschneiden, auto, background, befehl, befehle, beispiele, bereits, besser, bessere, bestimmt, bestimmte, bleibt, blog, Box, browser, chrome, codes, css:, dann, dass, deine, detail, diese, display:none, durch, eine, einen, einer, eines, einfach, einfache, einmal, einzigen, elemente, ende, entsprechende, erhalten, erkennen, erst, erste, erstellen, esc, euch, fall, farbliche, format, frei, funk, funktion, funktionieren, funktioniert, geben, genau, gewinne, gleiche, gt, halten, hier, hintergrund, html, id, informationen, inhalt, inhalte, ip, jede, jedem, jeden, kann, kennen, lager, lassen, lens, logo, machen, mehr, mittel, muss, nach, Nach Ver, neben, nicht, noch, nutzt, oder, page, parameter, play, plugin, plugins, RAM, richtig, richtige, richtigen, rund, safari, schnell, schnelle, schrift, schriften, seine, seinen, seite, seiten, setzen, sich, sichtbar, sind, soll, sondern, spalten, sparen, spiele:, stellen, stellt, struktur, style, tabelle, tabellen, test, text, titel, tool, tools, transparent, transparente, unsere, unter, vergisst, verstecken, versteckt, verwenden, verwendete, webdesign, welche, welchen, welches, wenn, werden, wieder, wird, wirklich, wordpress, zeile, zeilen, zwischen

CSS: Bestimmte Inhalte ausblenden

Mit CSS Code kannst du sehr einfach bestimmte Elemente im Theme verstecken.

CSS Befehl:

Du kannst den CSS Befehl display: none verwenden, um ein Element auszublenden:

.page-element {
display: none;
}

Hierbei musst du die Klasse .page-element mit der ID oder Klasse des von dir gewünschten Elements ersetzen, welches verborgen werden soll. Wir empfehlen die Verwendung des Firefox Plugins Firebug zur Identifizierung der richtigen ID bzw. Klasse.

Beispiele:

Bitte beachte, dass sich die HTML Strukturen je nach verwendeten Theme unterscheiden können und manche Codeschnipsel deshalb nicht in jedem Theme gleichermaßen funktionieren.

Logo ausblenden

#logo {
display: none;
}

Alle Seitentitel verstecken

.page-title {
display: none;
}

Seitentitel einer einzigen Seite ausblenden ( Seite mit ID 99)

#page-99 .page-title {
display: none;
}

Beitragsinformationen (Postmeta) verstecken

.postmeta {
display: none;
}

Autor des Beitrags ausblenden

.postmeta .meta-author {
display: none;
}

Archivseiten Überschrift verstecken

.archive-title {
display: none;
}

Wer seinen Blog liebt, der arbeitet und feilt daran, bis er perfekt wird. Manchmal stören am Ende dann aber lästige Boxen, Leerräume oder im Hintergrund wäre ein transparentes Grafikdetail noch schön. Neben bereits bekannten CSS Designmöglichkeiten bieten euch die Befehle [visibility], [display] und [opacity] eine schnelle und einfache Möglichkeit, diesen zusätzlichen kreativen Freiraum zu gewinnen.

Visibility

Die visibility Eigenschaft legt die Sichtbarkeit eines Elements fest. Dafür verwendet ihr die Parameter [hidden] und [collapse]. Der Befehl [hidden] setzt das Element dabei ausschließlich auf vollständig transparent, [collapse] kann zusätzlich Tabellenspalten/-zeilen/-gruppen-Elemente ausschneiden. Wenn dein Browser [collapse] richtig interpretieren kann, werden die transparenten Elemente später nicht mehr sichtbar sein. Safari und Chrome erkennen ihn zwar in der Regel, geben ihn aber genauso wie [hidden] aus, also mit Textfluss-Unterbrechung.

In beiden Beispielen wurde die 2. Zeile transparent:

Display

Der Befehl [display: none] funktioniert im Prinzip wie der [collapse] Befehl, nur dass ihr nicht mehr auf Tabellen beschränkt seid, sondern auch normalen Content lückenlos verschwinden lassen könnt. In unserem Fall den bekannten „Lorem ipsum …“ Text.

Zum Vergleich nur mit [hidden]:

Opacity

[opacity] ermöglicht euch, Boxen, Hintergründe und Schriften stufenweise transparent werden zu lassen. Dazu müsst ihr den „opacity“ Befehl in die entsprechende Codezeile einfügen. Sie kann dabei einen Wert zwischen 0 und 1 annehmen.

Code in der Schriftzeile:

Code in der Backgroundzeile:

Fazit:

Zum Ausschneiden eignen sich [hidden] oder [display:none] wirklich gut. Sie sind schnell geschrieben und einfach in der Bedienung. Außerdem bleibt der Content für euch im HTML erhalten, falls ihr ihn wieder herstellen möchtet. Nur vor euren Leser ist er versteckt und das unabhängig davon, welchen Browser er nutzt. Durch den [opacity] Befehl bieten sich euch zusätzliche Gestaltungsmöglichkeiten, die man ab und zu vergisst, wie das Übereinanderlagern von Boxen oder das farbliche Anpassen des Themes. Auf jeden Fall wert, es einmal auszuprobieren.
Neben der hier vorgestellten In-Line Anwendung des Codes, funktionieren diese Code-Schnipsel natürlich auch in deiner style.css in der du die entsprechende .class oder #id einfach erweiterst. Wenn du in Testing-Tools gut abschneiden möchtest, ist diese Variante die bessere.

Wie strukturiert man Webseiten-Inhalte sinnvoll?

21. März 2016adminWebdesignaber, alle, allen, alles, also, alte, alten, analytics, andere, anderen, anstatt, antworten, anzeige, anzeigen, artikel, auch, beachten, bekomme, bekommen, bereits, besser, beste, bestehende, besuch, blog, book, bringen, dagegen, dank, danke, dass, deine, deinem, deren, detail, diese, direkt, DR, druck, ebook, eigene, eigenen, eigentlich, eine, einem, einen, einer, eines, einfach, einige, einmal, ende, erreichen, erst, erste, ersten, esc, fall, finde, folgen, format, fragen, frei, ganz, gegen, gelangen, gelesen, gemacht, gerade, google, gt, halten, heraus, herausfinden, hier, hilfe, id, ihnen, immer, informationen, infos, inhalt, inhalte, inhalten, jede, jeder, jetzt, kann, klick, klicken, komme, kommen, kommt, komplett, kopf, LAN, landen, lang, lange, lassen, leicht, leichter, lesen, letzten, machen, macht, media, mehr, nach, neue, nicht, nimmt, noch, nutzt, oder, OK, online, option, optionen, order, orten, platz, plugin, plugins, private, privaten, raus, reicht, relate, richte, scannen, schaffst, schon, sehe, sehen, seine, seinen, seite, seiten, sich, sind, social, sofort, soll, sollte, sollten, start, statt, stellen, struktur, suche, suchen, teil, teilen, test, unter, verfolgen, viel, viele, voll?, webdesign, webseite, webseiten, wechsel, weitere, welche, welchen, wenn, werden, wichtig, wichtige, wichtigste, wichtigsten, wirklich, woher, wordpress, zahl, zeigen

Eine neue Webseite oder einen Blog einzurichten oder eine schon bestehende Webseite neu zu gestalten, kann einem ganz schön Kopf zerbrechen bereiten. Und noch bevor man anfängt sich Gedanken zum Design zu machen sollte man sich überlagen, wie man die Webseiten-Inhalte strukturieren möchte.

Die wichtigsten Fragen, die man sich hierbei stellen sollte sind: Für wen ist die Webseite? und Welchen Zweck soll die Webseite erfüllen?

1. Die wichtigsten Fragen klären

Denn die Antworten auf diese Fragen können je nach Art der Webseite komplett unterschiedlich ausfallen. Wenn du z.B. ein Onlineshop hast, sind die Anforderungen an deine Webseite ganz andere, als bei einem Portfolio, einer Geschäftspräsentation oder einem privaten Blog.

Nachdem du dir Gedanken zum Zielpublikum deiner Webseite gemacht hast und du dich auch mit der Frage auseinander gesetzt hast, welchen Zweck du mit deiner Webseite eigentlich erfüllen möchtest kannst du sehr viel leichter herausfinden, welche Inhalte für deine Webseiten-Besucher eigentlich am wichtigsten sind.

Welche Links sollten in deinem Hauptmenü vorkommen, welche müssen in ein Untermenü oder auf welche kannst du komplett verzichten (oder eventuell reicht es auch, einige Links nur im Footer unterzubringen).
Welche Bereiche deiner Webseite sollten auf jeder Seite vorkommen und welche Inhalte sollten je nach Art der Seite wechseln?
Was möchtest du auf deiner Startseite zeigen und welche Inhalte sollen eher auf den Unterseiten angeordnet werden?

Du könntest auch mit einer Startseite anfangen, die die Inhalte deiner Webseite nur anteasert, so dass deine Besucher auf der Startseite einen ersten Eindruck bekommen, was sie auf deiner Webseite an Inhalten erwartet.

2. Woher kommen deine Webseiten-Besucher?

Jetzt hast du dir also bereits Gedanken zu deiner Startseite gemacht. Aber es ist auch wichtig zu bedenken, wie deine Besucher eigentlich überhaupt auf deine Webseite gelangen.

Falls du schon eine bestehende Webseite hast, kannst du dafür Google Analytics als Info-Quelle zur Hand nehmen (z.B. über das WordPress-Plugin Google Analytics). Du solltest nämlich auch daran denken, dass viele Besucher vielleicht über die Google-Suche oder Social Media-Links (über Facebook oder Twitter) direkt auf einem Blog-Artikel oder einer anderen Unterseite landen. Diese Besucher sehen also die Startseite überhaupt nicht gleich.

Bei einem Portfolio, das du hauptsächlich als Visitenkarte für dich nutzt, ist dagegen recht wahrscheinlich, dass alle Besucher als erstes deine Startseite besuchen.

3. Welche Informationen sind wirklich relevant?

Außerdem solltest du dir darüber Gedanken machen, welche deiner Inhalte wirklich wichtig sind, um deine Ziele zu erreichen. Dein Haupt-Menü sollte z.B. übersichtlich und leicht überschaubar sein. Einige Links sind daher vielleicht besser an einer anderen Stelle aufgehoben (Sidebar, Untermenü, Footer).

Natürlich gibt man sich viel Mühe mit den eigenen Inhalten und am liebsten möchte man seinen Besuchern, gleich alle Informationen mitteilen. Aber die Inhalte übersichtlich zu halten, ist eventuell wichtiger, als alles mitteilen zu wollen. Wenn du aber nur die wichtigen Informationen aufnimmst, schaffst du eine klarere Struktur und du kannst deinen wichtigen Inhalten mehr Platz bieten. Deine Besucher finden sich so viel leichter auf deiner Webseite zurecht.

Natürlich ist es aber auch wichtig, die Besucher nicht zu langweilen. Auf News-Webseiten oder Online-Magazinen, auf denen die Besucher die Inhalte eher abscannen und nicht unbedingt im Detail lesen, ist eventuell eine andere Strategie sinnvoller. Es kommt also wie gesagt immer sehr stark auf deine Ziele und dein Ziel-Publikum an, welche Strategie du für deine Webseite verfolgen solltest.

4. Optionen bieten

Ein weiterer wichtiger Punkt ist es auch, immer Optionen zu bieten und deine Besucher nicht ins “Nichts” laufen zu lassen. Es könnte vielleicht sinnvoll sein, noch einmal eine Anzahl an relevanten Infos oder Links im Footer anzubringen, anstatt die Webseite einfach mit dem letzten Inhaltsbereich enden zu lassen. Auch eine Webseiten-Suche ist dabei eine hilfreiche Möglichkeit.

Auf Blog-Artikeln kannst du mit Hilfe eines Plugins weitere Beiträge mit ähnlichen Themen anzeigen (z.B. mit Related Posts von Jetpack oder dem Yet Another Related Posts-Plugin). So können deine Leser gleich zum nächsten Beitrag weiter klicken, wenn ihnen der gerade gelesene Artikel gefallen hat.

Wenn die Hauptmenü-Punkte auf deiner Webseite (z.B. bei einem Shop mit Warenkorb-Link) besonders wichtig sind, könnte eine feststehende Menüleiste für dich wichtig sein. So finden deine Besucher immer sofort zu deinen wichtigsten Links. Wichtig ist dabei zu beachten, ob die Leiste nicht zu viel Platz in der Höhe deiner Webseite wegnimmt oder ob du diesen Platz für das Menü einnehmen möchtest.

Google Fonts über den eigenen Server einbinden

21. März 2016adminWebdesignaber, alle, aller, anzeige, arbeit, archiv, artikel, assis, auch, auswahl, besser, bleibt, bringen, browser, copy, dann, dass, daten, dauer, dauert, diese, direkt, eigene, eigenen, einbinden, eine, einem, einen, erst, erste, erzeugen, esc, etwa, etwas, f2, finde, findet, font, format, formate, formaten, google, gt, haben, herunterladen, hier, id, ip, kann, kein, keine, klassische, kleine, kleinen, kunden, laden, LAN, landet, liegt, mehr, mehrere, mehreren, mein, meine, methoden, muss, nach, nicht, oder, open, ordner, page, paste, pfeil, praktische, problem, regeln, schnell, schrift, schriften, sehe, sehen, seite, sekunden, server, sich, sondern, stellen, stellt, style, text, texte, time, tool, tools, type, unter, URL, verbindung, verschiedene, version, versteckt, viel, wahl, webdesign, webfonts, webseite, wenn, werden, wird, wordpress

Es gibt verschiedene Methoden, um Google Fonts in eine Webseite einzubinden. Die klassische Methode ist, die Schriften über einen Link in der header.php oder – besser – über die functions.php ins Theme einzubinden. Ellen Bauer hat einen ausführlichen Artikel dazu geschrieben: Google Fonts in WordPress Themes

Bei dieser Methode liegen die Schriften auf den Google-Servern und werden über einen Link auf meine Webseite geholt. Wird meine Seite geladen, schickt sie eine Anfrage an den Google Server und der liefert dann die Schriften aus. Davon merkt man in der Regel nicht viel. Aber es bleibt die Tatsache, dass eine Abfrage passiert und das dauert ein paar Millisekunden.

Je nach der Qualität der Datenverbindung kann es auch passieren, dass die Schriften nicht schnell genug ausgeliefert werden. Dann erscheinen alle Texte plötzlich in Arial oder Times.
Auch Firewalls können ein Problem darstellen – in manchen Firmen gelten so strenge Regeln, dass die Mitarbeiter keine Google Fonts zu sehen kriegen.

Google Fonts herunterladen und Webfont erzeugen

Aus diesen Gründen bin ich in letzter Zeit dazu übergegangen, Google Webfonts nicht mehr per Link einzubinden, sondern direkt auf den Sever zu laden, auf dem auch das WordPress-Theme liegt. Ich gehe davon aus, dass das rechtlich kein Problem ist, denn die Google Webfonts haben eine SIL Open Font License, die das Herunterladen erlaubt.

Wenn man sich bei den Google Webfonts eine Auswahl zusammengestellt hat, kann man diese Auswahl über einen Link herunterladen. Der Link versteckt sich hinter dem kleinen Pfeil rechts über der bunten Page-Load-Anzeige.

Allerdings befindet sich in dem zip-Archiv, das im Download-Ordner landet, nur eine TrueType-Version der Schrift. Damit können nicht alle Browser etwas anfangen. Der Font muss in mehreren Formaten (ttf, eot, woff, woff2, svg) zur Verfügung gestellt werden.

Das ist aber nicht weiter schwierig, denn es gibt Tools um aus einem TrueType-Font einen Webfont zu erzeugen. Zum Beispiel den Google Webfonts Helper. Ich nutze sehr gerne den Webfont-Generator von fontsquirrel.com.

Beide Tools bringen praktische CSS-Schnipsel mit, die man per Copy & Paste in die CSS-Datei des WordPress-Themes übertragen kann. Hier ein Beispiel von FontSquirrel.

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 12, 2016 */
@font-face {
    font-family: 'fira_sansthin';
    src: url('firasans-thin-webfont.eot');
    src: url('firasans-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('firasans-thin-webfont.woff2') format('woff2'),
         url('firasans-thin-webfont.woff') format('woff'),
         url('firasans-thin-webfont.ttf') format('truetype'),
         url('firasans-thin-webfont.svg#fira_sansthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

WordPress Post ID herausfinden

14. März 2016adminWebdesignaber, adresszeile, alle, allen, also, alte, alten, anzeige, arbeit, arbeiten, auch, bearbeiten, blick, browser, copy, detail, details, diese, DR, editor, eine, einen, einer, eines, einfach, ende, entsprechende, erscheint, erst, erste, ersten, euch, eurer, fahren, fall, finde, findet, funk, funktion, funktionen, funktioniert, ganz, geht, gelesen, genau, gerade, gt, haben, halten, heraus, herausfinden, hier, id, inhalt, inkl, interne, internen, jeweilige, jeweils, kann, klick, klicken, kommt, kopie, kopieren, kosten, LAN, leicht, lesen, markieren, maus, nach, nein, nicht, oder, orten, over, paste, plugin, plugins, raus, schlag, schnell, schnellste, schnellsten, schon, seite, seiten, sich, sogar, teil, titel, unter, URL, verwenden, viel, welche, wenn, werden, wieder, wird, wissen, wordpress, wortes, zahl, zahlen, zeigen, zeigt, zeile, zwei, zweite

Zahlreiche Plugins und WordPress Funktionen verwenden sie: die ID eines Beitrags oder einer Seite. Aber wie findet man Post ID heraus? Wir zeigen euch, wie ihr ganz einfach die ID eines Beitrags, einer Seite oder einer Kategorie in WordPress herausfindet.

ID eines Beitrags in WordPress finden

Wer zum ersten Mal die Post ID eines WordPress Beitrags verwenden möchte, sucht sich gern mal dumm und dämlich. Man vermutet diese vielleicht auf der Detailseite des jeweiligen Beitrags oder sogar in der Beitragsübersicht. Fehlanzeige? Jein. Auf beiden genannten Seiten könnt ihr die Post ID finden, intuitiv gelingt das aber nicht unbedingt.

ID eines Beitrags auf der Übersichtsseite

Wenn ihr den gesuchten Beitrag nicht zufällig gerade bearbeitet, findet ihr die gewünschte Post ID am schnellsten auf der Übersichtsseite der Beiträge (Beiträge > Alle Beiträge).

In allen gängigen Browsern wird in der linken unteren Ecke die URL eines Links angezeigt, wenn ihr mit dem Mauszeiger über den Link fahrt. So auch auf der Übersichtsseite eurer WordPress Beiträge. Hovert ihr also über den Titel eines Beitrags, erscheint links unten die interne Beitrags-URL. Teil dieser URL ist post=1234 . Die Zahlenfolge hinter post=ist die ID des entsprechenden Beitrags!

Die Post ID könnt ihr ganz einfach auf der Übersichtsseite ablesen

Post ID auf der Beitragsseite

Bearbeitet ihr den entsprechenden Beitrag gerade oder wollt die ID gern kopieren, findet ihr die Post ID auch auf der Beitragsseite heraus.

Ihr öffnet also den gewünschten Beitrag zum Bearbeiten in WordPress und werft einen Blick in die Adresszeile eures Browsers. Dort findet ihr wieder eine URL, in der post=1234 vorkommt. Diese Zahl ist die ID des Beitrags!

Praktisch: ID eines Beitrags aus der URL im Editor kopieren

Bei dieser Variante besonders praktisch: ihr könnt in die Browserzeile hineinklicken, die Post ID markieren und per Copy & Paste an der gewünschten Stelle einfügen.

Die ID einer Seite oder Kategorie herausfinden

Analog zum Finden einer Beitrags ID geht ihr bei Seiten, Kategorien und Schlagworten vor. Auch hier könnt ihr auf der jeweiligen Übersichtsseite mit der Maus über die gewünschte Seite bzw. Kategorie fahren und aus der URL-Anzeige in der linken unteren Ecke eures Browsers die ID ablesen.

Ebenso funktioniert die zweite Variante, bei der ihr die URL im Editor der jeweiligen Seite oder Kategorie ablest.

Seiten ID in WordPress

Genau wie bei Beiträgen findet ihr die Seiten-ID in WordPress in der jeweiligen URL hinter post= . Bei post=1234 ist also 1234 die ID der jeweiligen Seite.

Auch die ID einer Seite kann aus der URL im Editor abgelesen werden

ID von Kategorien oder Schlagworten in WordPress

Die URL einer Kategorie oder eines Schlagwortes sieht ein bisschen komplizierter aus, aber auch hier könnt ihr auf einen Blick die ID ablesen.

In diesem Fall haltet ihr Ausschau nach tag_ID=1234 – die Zahlenfolge ist die ID der jeweiligen Kategorie oder des Schlagwortes.

Sieht erstmal kompliziert aus: die URL im einer Kategorie. Aber auch hier könnt ihr die ID einfach ablesen!

Fazit

Eine Kleinigkeit, die bei Nichtwissen viel Zeit kosten kann: das Herausfinden der ID von Beiträgen, Seiten, Kategorien oder Schlagworten. Die ID ist jeweils in der internen URL zum Inhalt zu finden. Sie kann entweder auf der Übersichtsseite oder im Editor einfach abgelesen werden.

Welche Kleinigkeiten haben euch in WordPress schonmal länger aufgehalten?

Geschwindigkeit deiner Website optimieren

1. Februar 2016adminSEO10, 2014, aber, abfragen, alle, alte, alter, alternative, artikel, audio, ausnutzen, besser, book, browser, cache, caching, dass, datum, definieren, deine, diese, DR, drei, drop, eine, einer, einstellungen, ende, entsprechende, erst, esc, fast, file, files, filter, finde, findet, font, fragen, geben, geschwindigkeit, gt, gute, gzip, haben, hier, htaccess, html, id, image, immer, inhalt, inhalte, install, ip, jahr, java, jeweilige, kein, keine, kennen, komprimierung, live, match, mbit, mehr, messen, minute, mozilla, nicht, noch, nutzen, oder, OK, open, optimieren, optimization, over, page, performance, ping, plus, praktische, problem, probleme, remove, richtig, script, server, setzen, sich, sind, soll, sollte, source, speed, teil, teilen, test, text, tool, tools, type, unter, video, viel, viele, vier, webdesign, website, websites, wieder, wird, wordpress, your, zwischen

Wir alle kennen die Tools zum Messen der Geschwindigkeit einer Website: Pagespeed, YSlow, Pingdom, Webpagetest oder das Kombitool aus Pagespeed und YSlow GTMetrix. Aber wie wird zum Beispiel Browser Caching aktiviert? Wer sich damit nicht auskennt, der findet viele, viele Artikel dazu, die viel Code in sich haben und nichts erklären. Hier ist noch einer davon. 😉
Über die vergangenen Jahre habe ich dieses Gist immer wieder ergänzt, verbessert und korrigiert. Entstanden ist eine sehr praktische Sammlung von Einstellungen, die fail safe die jeweiligen Möglichkeiten des Hosters ausnutzen. Die entsprechenden Anweisungen sind in If-Abfragen gekapselt, so dass es bei guten Hostern keine Probleme mit nicht unterstützen Modulen geben sollte.

Die Einstellungen teilen sich in drei Bereiche: Komprimierung (Deflate/GZip), Browser Caching (Ablaufdatum für statische Caching-Inhalte definieren) und dem Setzen von sinnvollen Headern (Keep Alive, Accept Encoding, etc.).

#
# Sources:
# http://stackoverflow.com/questions/7704624/how-can-i-use-gzip-compression-for-css-and-js-files-on-my-websites
# http://codex.wordpress.org/Output_Compression
# http://www.perun.net/2009/06/06/wordpress-websites-beschleuinigen-4-ein-zwischenergebnis/#comment-61086
# http://www.smashingmagazine.com/smashing-book-1/performance-optimization-for-websites-part-2-of-2/
# http://gtmetrix.com/configure-entity-tags-etags.html
# http://de.slideshare.net/walterebert/die-htaccessrichtignutzenwchh2014
# http://de.slideshare.net/walterebert/mehr-performance-fr-wordpress
#

<IfModule mod_deflate.c>
# Insert filters / compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/vtt 
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/atom+xml 
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/ld+json 
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
AddOutputFilterByType DEFLATE application/x-font-ttf 
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json 
AddOutputFilterByType DEFLATE font/opentype 
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon

# Exception: Images
SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 month" 
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/html "access plus 1 minute"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month" 
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds" 
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" 
ExpiresByType text/cache-manifest "access plus 0 seconds" 
ExpiresByType audio/ogg "access plus 1 month" 
ExpiresByType video/mp4 "access plus 1 month" 
ExpiresByType video/ogg "access plus 1 month" 
ExpiresByType video/webm "access plus 1 month" 
ExpiresByType application/atom+xml "access plus 1 hour" 
ExpiresByType application/rss+xml "access plus 1 hour" 
ExpiresByType application/font-woff "access plus 1 month" 
ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 
ExpiresByType application/x-font-ttf "access plus 1 month" 
ExpiresByType font/opentype "access plus 1 month" 
</IfModule>
## EXPIRES CACHING ##

#Alternative caching using Apache's "mod_headers", if it's installed.
#Caching of common files - ENABLED
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt|html|htm)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>

<IfModule mod_headers.c>
 <FilesMatch "\.(js|css|xml|gz)$">
 Header append Vary Accept-Encoding
 </FilesMatch>
</IfModule>

<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>

<IfModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

# Set Keep Alive Header
<IfModule mod_headers.c>
 Header set Connection keep-alive
</IfModule>

# If your server don't support ETags deactivate with "None" (and remove header)
<IfModule mod_expires.c> 
 <IfModule mod_headers.c> 
 Header unset ETag 
 </IfModule> 
 FileETag None 
</IfModule>

Flammkuchen mit getrockneten Tomaten und Chorizo

22. Januar 2016adminRezepte10, 50, aber, alle, alles, alte, altes, arbeit, arbeiten, auch, aufs, basilikum, belegen, buch, dass, diese, DR, durch, eine, einem, einer, einmal, esc, etwa, etwas, finger, ganz, ganze, geben, gehen, hier, id, knoblauch, lassen, legen, leicht, live, minute, minuten, nach, noch, oder, ofen, ping, RAM, rote, ruhe, rund, schlag, schnitt, sind, teil, teilen, tolle, tollen, tomate, tomaten, vier, webdesign, wenn, wordpress, zwischen

Ein Flammkuchen mit getrockneten Tomaten und würziger Chorizo? Aber gern! Dieser fantastische Flammkuchen ist eine gelungene Abwechslung zum Flammkuchen elsässer Art.

Hier sind die Zutaten für 2 Flammkuchen

2 Flammkuchenböden
3 EL Mascarpone
1 EL Tomatenmark
Salz&Pfeffer
6 getrocknete Tomaten in Öl (das Öl abtupfen)
100 Gramm getrocknete Chorizo in Würfeln
2 EL frischen Schnittlauch in Röllchen geschnitten

Diese Flammkuchen müsst Ihr probieren!

Das Topping mit der spanischen Chorizo, den fein geschnittenen Frühlingszwiebeln, dem Schafskäse, und dem Sauerrahm- Guss mit einer leichten Prise Knoblauch ergeben eine tollen Kombination. Der frische Basilikum rundet das ganze ab.

Hier ist das Rezept dafür:

Zutaten für den Teig:

250g Weizenmehl
50g Buchweizenmehl
20g Hefe
160g kaltes Wasser
1 EL Olivenöl
8g Salz
1 Prise Zucker

Zutaten für den Belag:

200g Schmand oder saure Sahne
Salz, Pfeffer
1 Knoblauchzehe
100g Chorizo in dünne Scheiben
200g rote und gelbe Kirschtomaten
250g Schafskäse
1 Bund Frühlingszwiebeln
frische klein blättriger Basilikum
Salz,Pfeffer, Olivenöl

Die Zutaten für den Hefeteig in die Rührschüssel geben. Alles mit dem Knethaken des Küchengerätes bzw. des Handrührgerätes zu einem glatten Teig verkneten. Auf eine bemehlte Arbeitsfläche geben und noch einmal von Hand kurz durcharbeiten, abgedeckt mit einem Geschirrhandtuch ruhen und gehen lassen.
In der Zwischenzeit den Sauerrahm- Guss zubereiten. Dafür den Sauerrahm in eine Schüssel geben, fein geschnittenen Knoblauch dazugeben und mit Salz und Pfeffer abschmecken. Die Frühlingszwiebeln waschen und das grüne großzügig abschneiden. Die Frühlingszwiebeln in feine Ringe schneiden. Die Tomaten waschen und vierteln oder in dünne Scheiben schneiden. Den Schafskäse zerbröseln.

Wenn der Hefeteig gegangen ist den Teig nochmals auf einer bemehlten Arbeitsfläche durchkneten und auf Backpapier dünn ausrollen und am Rand einschlagen, über den Finger ziehen, so dass sozusagen ein zopfähnlicher Rand entsteht. Den Sauerrahm- Guss darauf verteilen. Danach den zerbröselten Schafskäse darauf streuen und den Teig mit der in Scheiben geschnittenen Corizo belegen. Die geschnitten Tomaten und die Frühlingszwiebeln darauf verteilen und das ganze noch mit etwas Meersalz würzen.

Den Flammkuchen auf ein Kuchengitter ziehen und im vorgeheizten Backofen bei 250 Grad ( Umluft 200 Grad) 12 Minuten backen. Aus dem Ofen nehmen, mit dem abgezupften Basilikum bestreuen und mit etwas Olivenöl beträufeln. Mit frischem Pfeffer aus der Pfeffermühle würzen, aufschneiden und servieren.

deliciousdishesaroundmykitchen.wordpress.com

WordPress CRON Job startet nicht

11. Januar 2016adminWebdesignaddress, after, alle, also, alte, alter, alternative, backup, backups, change, disable, DR, everything, file, files, full, htaccess, id, install, interne, internet, ip, later, look, message, mode, nicht, OK, over, plugin, plugins, plus, ports, process, protected, provider, remove, rote, scheduler, server, shell, should, start, startet, system, time, version, webdesign, website, when, will, wordpress, your

1. Maintenance mode?

Firstly: is your website in maintenance mode? This disables scheduled tasks of all kinds – so turn it off first.

2. No visitors?

WordPress’s scheduler relies on the site having visitors. No visitors means that WordPress doesn’t run, and therefore can’t hand over to the scheduled task. If your site is in development, and you schedule a backup run for a time when all the developers are asleep, then that may be the cause for the scheduled task not running. (Read more here).

3. Is your scheduler explicitly disabled?

Perhaps your site has WordPress’s scheduler disabled in the configuration.UpdraftPlus versions 1.6.61 and later will alert you of this; to check manually, look for a line like this in your wp-config.php file (which is found in the root directory of your WordPress install), and remove it (or change true to false, making sure there are no quote marks around false):

define('DISABLE_WP_CRON', true);

In this case, the disabling may be something your web hosting company did intentionally, so be aware that they may re-disable it. Or, it may be something that you did intentionally, and you may have set another means of calling WordPress’s scheduler system, perhaps via your web hosting company’s control panel. In that case, the message about DISABLE_WP_CRON is to be expected – but note that it is then your responsibility to make sure that the scheduler is called frequently enough to process all the jobs scheduled on your site. No backups, even those scheduled with “Backup Now” will run until the time that you have set the scheduler system to be called.

Also – note that it’s possible for DISABLE_WP_CRON to be set in a file other than wp-config.php; wp-config.php is simply the most likely (99%) place. If you have a warning about DISABLE_WP_CRON, but it is not found in wp-config.php, then it will be somewhere else – you will need to hunt for it.

4. Loopback connections are disabled?

Some web hosting providers (one big one: Heart Internet) purposefully (though for no good reason) disable the “loop-back” connects that allows WordPress to run its scheduler. In such a case, you can try this use WordPress’s alternative scheduling system – instructions here. The instructions amount to one thing: add a line anywhere in the middle of your wp-config.php file as follows (don’t add it too late in the file, or it will take no effect):

define('ALTERNATE_WP_CRON', true);

5. Try using a cron job

If your web hosting company gives you “shell” access and you can set up cron jobs, and if you are confident/skilled enough to use that, then that’s a great solution. Jobs run that way won’t face any time-out issues imposed by the webserver. Read more about running via the shell here.

6. Is your entire website password-protected?

Another cause is if your entire website is password-protected at the HTTP level (e.g. via a .htaccess file). This also prevents WordPress’s scheduler from working. You should configure your webserver to allow “loop-back” connections (i.e. connections to self), otherwise you WordPress scheduler and everything that depends upon it will be broken. If you are using Apache and .htaccess, then adding these two lines to the access control section of your .htaccess should work – after replacing a.b.c.d with your website’s IP address):

Allow from a.b.c.d
Satisfy Any

Please note: The above suggestion is just a suggestion. .htaccess configuration is a very big subject. UpdraftPlus neither “supports” nor “doesn’t support” different .htaccess configurations, because .htaccess files operate at quite a different level to WordPress plugins. If you enter the correct instructions in your .htaccess file to permit access, then UpdraftPlus will work. But if you are not sure of the correct instructions for your particular server, then you need to consult with either your web-hosting company or your local .htaccess guru.

Nach WordPress-Update werden die Umlaute angezeigt

11. Januar 2016adminWebdesignbrowser, eine, einstellungen, ganz, gt, htaccess, korrekt, lesen, mehr, mein, meine, nach, nicht, obwohl, stellt, umlaute, update, werden, wordpress, zeigt

Die Umlaute werden nach dem Update nicht mehr korrekt dargestellt obwohl in den ‚Lesen‘-Einstellungen, in der wp-config und im Browser UTF-8 eingestellt ist.

Lösung:

AddDefaultCharset UTF-8

ganz oben in meine .htaccess Datei eingefügen. Fertig 🙂

Google Forms nahtlos in WordPress integrieren

2. September 2015adminWebdesignDropdown Style, forms, google, integrieren, internet, Nach Ver, nahtlos, oder, office, smartphone, URL, webdesign, werden, wordpress

WordPress-Plugins für Formulare gibt es viele, aber es muss ja nicht alles in der eigenen Datenbank gespeichert werden. Insbesondere, wenn ihr die Daten weiter verarbeiten möchtet und sie dafür zum Beispiel in einer Tabelle braucht. Wie ihr in wenigen Schritten ein mit Google-Forms erstelltes Formular nahtlos in WordPress integriert, lest ihr in diesem Beitrag.

Google-Forms sind einfach zu bedienen und bieten viele Funktionen, um schnell Umfragen und Formulare zu erstellen. Praktisch sind auch die Validierungsmöglichkeiten der einzelnen Felder und die nutzerfreundlichen Hinweise am Textfeld, falls die eingegebenen Daten nicht den Vorgaben entsprechen. Auch die weitere Verarbeitung der Daten fällt leicht, da die Angaben in einer Google-Tabelle gespeichert werden. Einzig, dass per iframe eingebundene Umfragen als Google-Forms Element aus eurem Design herausstechen, trübt das Bild. Aber ihr könnt die Google-Formulare auch direkt in eure Seite integrieren und an euer persönliches Design anpassen:

1. Fragebogen in Google Forms erstellen

Zuerst erstellt ihr in Google-Forms einen Fragebogen mit den gewünschten Fragetypen, legt dann fest, welche Angaben erforderlich sind und ruft im nächsten Schritt die URL zum Fragebogen ab. Jeder, der die URL zu eurem Fragebogen kennt oder über einen Link darauf stößt, kann euren Fragebogen ansehen und ausfüllen. Darum bietet es sich an, das Formular direkt in WordPress zu integrieren und nicht zu verlinken oder per iframe einzubinden.

2. WordPress-Plugin Google Forms installieren

Mit dem Plugin Google Forms holt ihr euch praktische Funktionen für Google-Forms in eure WordPress-Seite. Dazu gleich mehr.

3. Ein neue Umfrage anlegen und anpassen

Über den Navigationspunkt „Google Forms“ gelangt ihr zur Übersicht eurer bisher angelegten, beziehungsweise konfigurierten Formulare. Per Klick ist schnell der Dialog für das neue Formular aufgerufen:

Selbsterklärend fügt ihr in das erste Feld die URL zu eurer Google-Form ein. Interessanter wird es mit dem zweiten Feld, denn hier könnt ihr eine beliebige URL hinterlegen, die im Anschluss an das Absenden des Formulars angezeigt wird. Ideal, um Ziele in Google Analytics über die Seiten-URL zu erfassen. Damit das Weiterleiten auf eure eigene Abschlussseite funktioniert, wählt ihr im Dropdown „Style“ die Option „Redirect“. Zusätzlich könnt ihr euch noch eine E-Mail-Benachrichtigung bei neuen Abschlüssen einrichten. Als letztes funktionierendes Schmankerl ergänzt ihr das Formular mit einem Captcha über gleichnamige Option oben rechts in der Ecke.

Von den zahlreichen weiteren Optionen haben in unserem Test die CSS-Ergänzungen, die Zeilenumbrüche und das Einblenden des rechtlichen Hinweises von Google nicht funktioniert. Korrekterweise solltet ihr eure User also vor dem Absenden noch darauf hinweisen, dass die Formulardaten in einer Tabelle bei Google gespeichert werden.

4. Shortcode in Beitrag oder Seite einfügen

Nach Veröffentlichung des Formulars in WordPress, könnt ihr aus der Übersicht den Shortcode kopieren. Diesen Code fügt ihr an gewünschter Position einfach in eine Seite oder in einen Beitrag ein. Nach dem Abspeichern erscheint dort das Formular:

5. Testen

Ob jetzt alles wie geplant funktioniert, testet ihr am besten selbst. Klappt die Weiterleitung auf eure eigene Abschlussseite? Bei unseren Tests war jeweils für 1 bis 2 Sekunden die Google-Abschlussseite sichtbar, bis wir auf die von uns eingestellte Seite weitergeleitet wurden.

6. Darstellung anpassen

Feinheiten im Umfrage-Layout nehmt ihr in eurer style.css vor. Den Abstand zwischen den einzelnen Fragen erstellt ihr zum Beispiel mit folgendem Code, den ihr einfach an das Ende eurer style.css anfügt oder in ein Custom-CSS-Plugin kopiert.

.ss-q-title {
 margin-top: 40px;
 }

Fazit: Auch wenn in unserem Test nicht mehr alle Funktionen des Plugins greifen, so ist es dennoch eine gute Möglichkeit, Google-Forms nahtlos in eure WordPress-Seite zu integrieren. Praktisch, denn so bleiben eure User auf eurer Seite und können nach dem Absenden der Form zu einer weiterführenden Seite geleitet werden.

WordPress SEO-Plugin von Delucks: Was kann es?

2. September 2015adminWebdesigndelucks:, einfach, kann, mehr, seo-plugin, sind, webdesign, werden, wordpress

Neben dem kostenlosen Yoast SEO-Plugin von WordPress gibt es jetzt eine sinnvolle Alternative: die international ausgerichtete Münchener Online-Agentur Delucks bietet ein wirkungsvolles SEO-Plugin, das mehr als Standard sein zu scheint. Im Vergleich zu Yoast punktet es vor allem in Sachen Übersichtlichkeit, Performance und der spezifischeren Überprüfung.

SEO: Ein sich ständig veränderndes Business

SEO heute ist nicht mehr wie es einmal war. Um in diesem schnelllebigen Betätigungsfeld nachhaltig erfolgreich zu sein, wird derzeit mit SEO immer öfter Content Marketing verbunden. Damit diese relevanten Inhalte effizienten Erfolg bringen, werden Tools entwickelt, die den Redakteuren erleichtern, Content suchmaschinenoptimiert zu erstellen. Mit dem SEO-Plugin von Delucks sollen sich zuerst die Inhalte erstellen lassen und diese dann ganz einfach optimiert werden.

Plugin an der Schnittstelle zwischen Redaktion und SEO

Das SEO-Plugin unterstützt dies dahingehend, indem es vor den Titel eines Beitrags den relevanten Suchbegriff stellt. Dies gilt auch für Alternativtexte wie Bilder. Dem Redakteur wird dadurch also erleichtert, den Fokus auf die Erstellung der Inhalte beizubehalten – ohne vorab SEO Checklisten durchgehen zu müssen. Doch jetzt einmal direkt: Was hat und kann das Plugin?

Alle Standards vorhanden, schönes Design, Performance

Die üblichen Funktionen bringt das Plugin selbstverständlich mit: Meta-Daten wie SEO-Title und Description für die verschiedenen Beiträge können einfach eingegeben und bearbeitet werden (Hier gibt Delucks 6 Tipps zu starken Meta-Daten). Super ist hier aber, dass sich das Plugin nicht nur für die Optimierung „interessiert“: es überprüftauch, dass die richtigen Keywords beim Schreiben verwendet werden. Dies geschieht, in dem die Keywords vorangestellt werden und das Plugin dann kontrolliert und durch klare Farben anzeigt, ob diese in sowohl Title, Description und im Text vorhanden sind:

Delucks bietet eine ausführliche Video-Anleitung zur Einstellung der Meta-Daten und Optimierung von Texten mit dem Plugin:

↵ Use original p

Zudem ist das Plugin Performance optimiert und daher um einiges schneller als Yoast, welches mehr an Megabyte RAM benötigt. Pluspunkt: Alles ist in deutscher Sprache verfasst und beachtet daher den deutschen Datenschutz! Außerdem können alle bisherigen Daten aus dem Yoast exportiert und übernommen werden. Die Benutzeroberfläche ist schön designed, die Menüführung optisch ansprechend und leicht handzuhaben. Denn zu jedem Punkt werden verstehbare Hilfetexte auch für den unerfahrenen Nutzer angeboten.

Kapitelweise Heranführung + Integrationen

Durch die optische Aufmachung werden Schritt für Schritt die notwendigen SEO-Einstellungen vom Nutzer konfiguriert. Das geschieht fast wie von alleine, man wird kapitelweise fast intuitiv durch das Plugin geführt. Einstellungen gehen dank der Übersichtlichkeit schnell und einfach von der Hand.

Bei der Variante Basic kann zwar Google Analytics integriert werden. Dennoch bietet Delucks auch eine eigene Tracking-Methode, die die Zugriffszahlen misst und den deutschen Datenschutz zu achten scheint.

Bei der Professional Variante übersteigen die Funktionen wirklich den Standard: Bildoptimierung und Einbettung eines statistischen Social-Share-Buttons. Bei der Optimierung von Bildern können gleich Alternativtexte eingegeben werden (Alt-Tag mit Suchwort) und ein Feld zur Eingabe der Urheberrechtsdaten wird bereitgestellt. Schade und negativ an der Optimierungsfunktion ist allerdings: Die Bilder werden einfach verkleinert, woran leider die Qualität zu leiden hat!

Das kostet der ganze Spaß

Das Plugin erhaltet ihr in drei verschiedenen Varianten: Basic, Professional und Suite. Das Basic-Paket, welches aber keine Extras anbietet, ist kostenlos. Herunterladen könnt ihr es hier. Die Professional Edition gibt es bereits für 22 USD (ca. 20 €), worin aber nur eine Lizenz für eine Website enthalten ist. Für die Variante Suite sind monatlich 29,90 € fällig. Insgesamt also recht korrekte Preise, für das was geboten wird – außer der Suite Version, die jährlich dann schon etwas teurer ausfällt. Lediglich die Lizensierung finden wir schwierig: Zu allen Paketen gibt es nur eine Lizenz für eine Website, ein Mittelding (beispielsweise für Blogger mit mehreren Websites) fehlt hier ganz klar!

Fazit zum Plugin

Insgesamt finden wir das Plugin eine super Alternative zu dem WordPress SEO by Yoast Plugin. Als nutzerfreundlich gilt Yoast zwar auf jeden Fall, aber allein von der übersichtlicheren Aufmachung her, überzeugt uns Delucks hier mehr. Auch hinsichtlich der Performance scheint Delucks zu punkten. Toll finden wir vor allem auch die Überprüfung des Titles, der Description und des Contents nach dem relevanten Keyword. Da kann eigentlich nichts mehr falsch gemacht werden! Nur die Lizensierung finden wir aufwendig und dann vor allem teuer, wenn mehrere Websites damit ausgestattet und bedient werden sollen.

WordPress: 5 Galerie-Plugins, die ihr kennen solltet!

2. September 2015adminWebdesigndurch, Envira Gallery Lite, euch, galerie-plugins, hier, kennen, solltet!, webdesign, wordpress

Um viele Bilder anzuzeigen bedarf es eines anständigen WP-Plugins. Wie ihr durch Bildkomprimierung eine kurze Ladezeit eurer Webseite erreicht, haben wir bereits für euch beschrieben, heute wollen wir euch 5 WordPress Galerie-Plugins vorstellen, die für Fotografen, Künstler, Selbstständige und Blogger in Frage kommen.

Wenn ihr mehr als eine Hand voll Bilder auf eurer Webseite darstellen wollt, eignen sich Bildergalerien dafür besonders gut. Durch ein passendes WP-Plugin könnt ihr euer bestehendes Theme so ganz leicht erweitern. Bevor ihr allerdings über ein Gallery-Plugin nachdenkt, solltet ihr überlegen, ob es je nach Nutzen der Webseite nicht sinnvoller wäre, sich ein neues WP-Theme auszusuchen, das eine passende Gallerie-Funktion bereits mitbringt. Viele Fotografie- und Portfolio-Themes beinhalten bereits entsprechende Funktionen, sodass ihr euch unter Umständen Arbeit ersparen könnt. Für alle, die lieber auf die Erweiterung ihres Themes durch ein Gallery-Plugin setzen, empfehlen wir:

FooGallery

Grundsolide und nutzerfreundlich erfreut sich die FooGallery großer Beliebtheit – und bietet neben der Möglichkeit eigene Templates zu kreieren, Features, mit denen es besticht:

Bilder ordnen mit Drag and Drop
Integrierte Gallery Templates und Möglichkeit zur Albumerweiterung
NextGEN importer tool
Übersichtlich durch Media Library zur Bilderverwaltung
Custom CSS für Galerien und Alben
Gallery picker zum Einfügen des Shortcode

Als flexibles und vernünftiges Plugin ist Foobox Gallery ein passendes Tool, um seine Galerien zu verwalten. Gallery Templates sind beispielsweise Masonry Gallery, Simple Portfolio, Responsive Image Gallery und Single Thumbnail Gallery.Mehr über die Foo Gallery gibt’s hier. Oder ihr klickt euch gleich zur Demo.

NextGEN Gallery

Für große Bildermengen gehört NextGEN längst zu den Klassikern der Gallery Plugins – nicht zuletzt wegen seiner hohen Nutzerfreundlichkeit. Seinen Beliebtheitsgrad steigert NextGen weiterhin durch

100% responsive Design
Verschiedene Thumbnail-Galerien mit vielen Optionen
Verschiedene Lightboxen für Thumbnail-Galerien
Thumbnail- oder Slideshow-Galerien, auch als Option für Besucher
Zuordnung von Galerien zu Alben PayPal- und ECommerce-Integration in der Pro-Version
Wasserzeichen

Durch eine strukturierte Benutzeroberfläche und einen vernünftigen Aufbau, konnte das Plugin bereits Millionen WP-User überzeugen. Falls ihr jetzt auch soweit seid: Hier erfahrt ihr mehr NextGen Gallery Plugin oder ihr guckt euch gleich die Demo an.

Envira Gallery Lite

Schnell, sicher und mit solidem Code ist es einfach zu bedienen. Um die Ladezeit eurer Site zu verringern, lädt das Plugin mit Hilfe von AJAX Bilder asynchron nach, zudem erstellt Envira Gallery responsive Galerien. Features:

modular aufgebaut und dadurch leicht zu erweitern
Galerien für Posts und Seiten
Responsive out of the Box: Galerien- und Lightboxen
Lädt Inhalte asynchron nach
Geringere Serverlast und schnelle Verarbeitung und durch optimierte Queries

Als gute Alternative zu unserem bereits vorgestellten Plugin NextGen Gallery richtet Envira thumbnails korrekt aus und formatiert sie anständig.Um mehr über Envira Gallery zu erfahren, könnt ihr hier klicken oder euch gleich die Demo ansehen.

Polaroid Gallery

Kurze Rede, gutes Aussehen: Das Plugin lehnt sich optisch – Achtung: Überraschung! – an die fast verschwundenen Polaroid-Abzüge an. Es enthält ein Templating-System, mit dem ihr eigene Layouts kreieren könnt und läuft auf Basis von CSS3 und jQuery. Polaroid Gallery Features:

Galerien im Polaroid-Look
Einbindung in interne WordPress Media Library
Nutzung auch für bereits hochgeladene Bilder
Gibt’s auch auf Finnisch

Infos zum nutzerfreundlichen Polaroid Gallery Plugin findet ihr hier und zur Demo einmal bitte hier klicken.

Lazyest Gallery

Das Plugin möchten wir vor allem Einsteigern und WP-Anfängern ans Herz legen. Für die Benutzung von Lazyest Gallery braucht ihr nur zwei Einstellungen: ein Bilderverzeichnis und eine Galerieseite. Da das Plugin sehr einfach gehalten ist und alles andere „allein“ erledigt, besticht es zudem durch schnelle Einsatzmöglichkeit und einfache Benutzung. Die Lazyest Gallery Features:

Erweiterbar
Zaubert aus bestehenden Bilderverzeichnissen eure Bildergalerien
Beschreibungstexte für einzelne Bilder oder Ordner möglich
Eingebaute Kommentarfunktion
Widgets für Slideshows, Galerieübersicht oder Bilder per Zufall
Gibt’s auf Niederländisch, Russisch und Deutsch
Shortcodes für Bildergalerien, Ordner, Bilder und Slideshows
Ordnungsmöglichkeit der Ordner und Bilder nach Datum, Alphabetisch oder manuell

Facebook WordPress Plugin online

2. September 2015adminFacebook, Webdesigneuch, facebook:, internet, noch, online, plugin, sich, webdesign, werden, wordpress

WordPress Plugin von Facebook

Ich will eigentlich gar nicht lange drum herum schreiben und zeig euch gleich was das Plugin kann und wie man es installiert. Die Features können sich sehen lassen. Wenn man viel mit Facebook arbeitet und eine aktive Fanpage pflegt und somit viele Leser von/auf Facebook hat, kann man diesen nun das volle Programm bieten:

Beitrag automatisch an die Timeline senden sobald er veröffentlicht wurde
Erwähnung von Freunden und Fanpages
Die bekannten Buttons (Like, Share, Subscribe) können problemlos eingebunden werden
Facebook-Kommentare können integriert werden
Interessante/Populäre Artikel auf Facebook anzeigen (Feedbox)
Direkter Link aus dem Dashboard zu Facebook-Insights
und noch ein paar Kleinigkeiten mehr 😉

Installation

Um das Plugin zu installieren könnt ihr es euch einfach hier herunterladen und in den Plugin-Ordner euerer WP-Installation hochladen, oder direkt über die Plugin-Suche in WordPress suchen und installieren.

Ist das Plugin installiert und aktiviert, müsst ihr anschließend eine Facebook-App anlegen. Hört sich für die, die es noch nicht gemacht haben kompliziert an, ist es aber nicht:

Besucht einfach die Seite https://developers.facebook.com/apps

Dort geht ihr dann rechts oben auf „Neue Anwendung erstellen“ und gebt dem Kind einen Namen:

Anschließend die Captcha-Abfrage eingeben und ihr kommt zu den Einstellungen der App, die wie folgt ausgefüllt werden müssen:

Die Daten, die ihr gleich noch braucht habe ich euch rot markiert. Nun geht ihr in euerem WordPress-Adminbereich auf die Einstellungsseite und gebt bei Step 3 die oben markierten Daten ein:

Das wars auch schon. Nun habt ihr die Auswahl der ganzen Features des Plugins. Wenn ihr eines davon auswählt werden noch die individuellen Einstellungen eingeblendet:

Zudem findet ihr auf der Widget-Seite euerer Installation nun die passenden Facebook-Widgets, die ihr nach Bedarf einsetzen könnt.Die offizielle Beschreibung zum Plugin findet ihr hier.

WordPress: WP Adminbar fehlt

10. August 2015adminWebdesignadminbar, auch, fehlt:, kann, nicht, webdesign, wird, wordpress

Adminleiste in WordPress 3.1 entfernen

Es gibt mehrere Möglichkeiten um die Adminleiste, die seit WordPress 3.1 dabei ist, zu entfernen. Der einfachste Weg geht über das Adminmenü: Benutzer → Dein Profil → Zeige Adminleiste. Dort kann man die Adminleiste für Frontend (Website) und für Backend (Adminbereich) ein und ausschalten.

Dies funktioniert logischerweise nur für den Benutzer, der die Adminleiste de- bzw. aktiviert hat. Will man für alle Nutzer die Adminleiste deaktivieren, dann muss man etwas tiefer in die Trickkiste greifen.

Über die style.css

Die einfachste, aber nicht unbedingt eleganteste Lösung ist es folgendes in die CSS-Datei zu notieren:

#wpadminbar {display:none;}

Die Adminleiste ist zwar noch immer da bzw. wird ausgeliefert, aber sie wird nicht im Browser angezeigt.

Als Plugin

Um die Adminleiste zu deaktivieren existieren momentan mehrere WordPress-Plugins:

Anpassung der functions.php

Die eleganteste Lösung ist es folgenden Code in die functions.php zu notieren:

add_filter( ‘show_admin_bar’, ‘__return_false’ );

WordPress: WP Adminbar fehlt

Das Problem: Statt der WordPress Admin-Leiste wird ein weißer Hintergrund am oberen Rand der Seite angezeigt:

Die Lösung:

In der footer.php des WordPress-Themes fehlt vermutlich der Eintrag:

<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>

Erst dadurch wird diese Admin-Leiste durch das WordPress korrekt gerendert.

Prüfen Sie bitte in Ihrem Theme folgende Codezeilen:

wp_head in der header.php
wp_footer in der footer.php

Wenn eine von beiden fehlt, kann die WP-Adminleiste nicht angezeigt werden.

<?php wp_head(); ?> muss im Header sein und <?php wp_footer(); ?> Im Footer kann auch nicht schaden.

WordPress Adminleiste im Backend steuern

Die WordPress-Adminleiste kann übrigens auch pro Benutzer an- und abgestellt werden. Und das jeweils für das Frontend und das Backend. Dazu im Backend auf den jeweiligen Benutzer wechseln (oder für das eigene Profil auf „Dein Profil“). Unter den „Persönlichen Informationen“ findet sich die Einstellung für“Zeige Adminleiste“.

WordPress Sidebar entfernen

31. Juli 2015adminWebdesignentfernen:, page, sidebar:, style, webdesign, wordpress

page.php: Sidebar-Tag löschen
style.css: .sidebar {display:none;} und single_left width: 100%

WordPress und der 503 Error bei Strato

20. Juli 2015adminWebdesigneinfach, error:, later, Service Temporarily Unavailable, sollte, strato, wordpress

Fehler “503 Service Temporarily Unavailable” angezeigt.

Service Temporarily Unavailable
The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

Was ist die Ursache?

Die Ursache für diesen 503 Error in Verbindung mit WordPress ist die Strato Server-Side Security. Diese sollte eigentlich gegen Spam in Formularen oder Gästebüchern schützen, scheint aber auch bei Logins anzuschlagen. Kommen zu viele Anfrage an ein solches Formular, weil beispielsweise ein Spambot versucht sich einzuloggen, wir die betroffene Seite für eine gewisse Zeit abgeschaltet.

Die Lösung für den 503 Error bei Strato

Die Lösung ist einfach simpel. Einfach in den Einstellungen bei Strato diesen Sicherheitsmechanismus ausschalten. Ihr findet diese Einstellung in Eurem Strato Accoung unter Sicherheit -> ServerSide Security.

Hier muss dann nur der Filter deaktiviert werden. Nachdem die Einstellungen getätigt wurden sollte dieses Problem behoben sein. Es kann allerdings eine Weile dauern, bis die neue Filter Einstellung wirklich wirksam wird.

How to Speed up WordPress

28. Mai 2015adminSEOcss:, internet, page, plugins, speed, webdesign, websites, wordpress

When you’ve built a WordPress blog, an important aspect of maintaining that blog is to keep it as fast as possible for your readers otherwise they will leave your site very quickly.

If you find that your blog is performing slower than you would like, there are many ways to speed up your WordPress site. It’s important to note that some of these suggestions will only provide a slight boost in speed, while others will deliver noticeable improvements.I hope to provide an in-depth guide that will show you exactly how to speed up your WordPress blog.

Build a Strong Foundation

The first part of running a fast WordPress blog is to make sure that you are working with the right tools. So first make sure that your themes, plugins and WordPress version is all updated to the most recent stable release, not only is this a good idea for performance but also for blog security too.

Next it might be time to look at upgrading your web host from a shared hosting environment. Shared hosting is good for small blogs with only a few thousand visitors per month but it might be time to look at something better. For example Blue Host now offers specialist WordPress hosting environments which are a lot faster or for a little more investment you can sign up with a managed WordPress hosting provider such as WP Engine.

Locate Any Plugins That Are Causing Slowdowns

Plugins can be some of the biggest culprits when it comes to slow loading pages that frustrate users. While each of the plugins you have installed at the moment may be necessary to the blog, it’s still important to identify which ones may be causing some slowdown, if any at all, in order to ascertain what you should do in the future regarding these plugins.

Using diagnostic plugins like P3 will actually provide you with a detailed breakdown of all of the plugins you have running and the amount of slowdown that each are causing for your website. If social-sharing plugins are the reason for some of the slowdown, you might want to consider removing these plugins and instead embed buttons for the respective social websites directly into the source code for your theme. There are also times when you can simply choose to replace one plugin for another, less demanding one.

Compress All Images

Compressing the images you’ve placed onto your nlog is also useful in cutting down page load times ever so slightly. However, simply compressing them down can also bring about a huge loss of quality in the pictures themselves. Using a tool like WP Smush.it will take out all of the bytes within the pictures that are deemed to be dispensable while still retaining the overall quality of the image. This will ensure that your images are never large enough to hamper the speeds of your site.

Remove Trash From the Database

While the autosave feature that is included with WordPress is certainly a nice feature to have, it also fills up your database with tons of data you simply don’t need, which can create slowdown for your site. This data includes all of the pingbacks, trackbacks and revisions made throughout the day. Thankfully, there are two methods of dumping this trash and freeing up a good amount of space that will make page load times quicker. For one, you could implement the WP-Optimize plugin into your WordPress, which will clean up the trash within your database on a regular and consistent basis. This ensures that only the essential website data is kept stored in the database. When you are getting ready to do this, make sure to create a back up of your most important data should anything go wrong during the procedure.

It’s also possible to directly set your WordPress to empty the trash itself on a daily basis by adding the line define(‘EMPTY_TRASH_DAYS’, 10 ); to the wp-config.php file. This allows you to manually set the number of days between each trash removal.

Utilize Browser Caching

Browser caching is an exceedingly useful trick to speeding up your WordPress, though it can be more difficult to implement than most of the tips mentioned here. Browser caching makes visiting your website speedier for customers that have already visited in the past. Expires headers are designed to tell a browser if it should take a web page from the browser’s cache. The pages stored within the cache allows the user to more quickly load the pages they’ve been to in the past, as there is already a cached version of that page within the browser. While this, of course, doesn’t work for people that have never visited before, it’s a nice tool that will keep return customers happy.

There are a number of useful and highly rated tools that you can use for browser caching, which include WP Super Cache and Hyper Cache. Each of these are easy to use for your caching needs. However, it’s essential that you install them correctly, as not doing so can make for a frustrating experience.

Place JavaScript on Bottom and CSS to Top

Placing JavaScript and CSS at the correct areas on the pages of your website can work wonders in actually speeding it up. When it comes to CSS files, make sure to put them as close as you can to the top of the page. Though this might seem like an odd thing to do, it’s important to note that browsers won’t fully load a page until the CSS file has been fully rendered. Putting it at the top of the page helps to expedite this process as much as possible. As for JavaScript, placing it at the very bottom of the footer is the best course of action, as this typically doesn’t allow portions of a page to be parsed until after the JavaScript has been completely loaded. By doing this, there won’t be anything left to parse after the JavaScript has loaded. Both of these suggestions help to create the correct order for loading a page that will automatically improve the loading speed of that page.

Use Static HTML in the Place of PHP at Times

Static HTML and PHP should be used hand in hand throughout your WordPress site. PHP, in particular, helps to make a website more efficient and greatly minimizes the necessity of entering information a multitude of times. Despite this advantage, PHP also uses up a larger amount of server resources than static HTML. As such, you’ll want to replace the PHP with HTML code in the spots around your website where you don’t necessarily need PHP as much. While this won’t drastically reduce load times, it can help to create a reduction in speeds when combined with a few of these other tips and tools.

Remove Any Inactive Plugins

In relation to a previous tip about detecting the plugins that slow down your site the most, a great and simple means of speeding up your WordPress is by removing any plugins that are currently inactive. While WordPress plugins can be extremely appealing, particularly new ones that pop up all the time, keeping a website as quick as possible requires trimming some of the excess that has a penchant to slow pages down. Make sure to identify all of the plugins that aren’t really necessary for your website and remove them entirely. This requires more than just pressing the deactivation button, as this will still take up much needed space, which can be bothersome if you don’t have much space to spare. Once you have identified all of the plugins that you don’t need, delete them completely from your website. Depending on the amount of plugins that you end up cutting, this could improve speeds dramatically.

Try Hosting Video Externally

Unless you fall under the rare situation of actually having a ton of space and an extremely quick server, it’s highly disadvantageous to host videos directly on your own WordPress, as this can cause a huge slow down on the pages associated with the videos. Hosting the videos you make and use on your WordPress with sites like Youtube and Vimeo can help to keep your site speeds fast for all customers. This is particularly important for anyone that posts a stray video here or there. Unless your website is basically dedicated towards posting lots of videos on a regular basis, hosting externally is the preferred method of video hosting.

Compress CSS Code

You should also attempt to compress your CSS code as much as possible, similar to what you would do when compressing an image. Making the code smaller will allow your browser to basically render the code faster, thus reducing the amount of time it takes for the code and subsequent page to load. The great thing about compressing your CSS code is that there are multiple options available for doing so. For instance, it’s possible to use a service known as a CSS Drive in order to compress the code manually. However, if you make changes to the CSS code on a consistent basis, then it’s much more preferable to use the WP CSS plugin, which is designed to automatically reduce the size of your CSS files by eliminating any of the unnecessary white space contained within. With this tool, you are also provided with the ability to set an expiry time for these CSS files.

Get Rid of Pingbacks and Trackbacks

If you’re not currently fully aware, pingbacks and trackbacks are two tools within WordPress that are designed to notify you when another blog or website has linked to your own. This helps to calculate any potential increases you could have in traffic to your site. While interesting and potentially useful at times, these features of WordPress can also be exceedingly taxing on the overall speed of your pages. As such, it’s best to go ahead and turn these notifications off. In order to properly do this, go to the “settings” section of your WordPress and further select the “Discussion” tab. Once you have arrived at that location, turn these two features to off.

Use the Keep Alive Feature

Keep Alive is a feature that sends a message from a visitor’s machine to the Web server as a means of asking permission to download a specific file. By allowing the Keep Alive feature to run in your WordPress, the visitor will be able to download a multitude of files without having to go through the permission process each and every time. This can save you a lot of bandwidth. To manually do this yourself, place the text Header set Connection keep alive into the file titled .htaccess.

By following each of these tips and recommendations, you will find that your page speed has been improved by a lot in next to no time. All of the aforementioned tips are relatively easy to implement and you will be surprised at what they can do for the amount of website traffic you receive now and in the future.

Video- und Audiodateien ohne Plugins in WordPress einbinden

17. April 2014adminAllerleiaudiodateien, einbinden, ohne, plugins, video, webdesign, wordpress

video-in-wordpress-einbinden

Wer seine Videodateien auf dem eigenen Server haben will und diese nicht über einen Drittanbieter wie z.B. YouTube, Vimeo, etc. hosten möchte, der kann seit WordPress 3.6 im Handumdrehen Videos ohne Plugins in WordPress einbinden.

Denn mit WordPress 3.6. kommt ein sehr umfangreicher integrierter Audio-/ Videoplayer. Hierzu setzt WordPress auf die sehr beliebte MediaElement.js. Auf der Herstellerseite sieht man auch direkt alle unterstützen Formate und wie welcher Browser oder welches Gerät die einzelnen Formate interpretiert. Hierzu ein Screenshot der Tabelle:

Browser and Device support - Quelle: mediaelementjs.com

Browser and Device support – Quelle: mediaelementjs.com

Video in WordPress einbinden

Um nun ein Video in WordPress einzubinden, geht man ähnlich vor wie bei einem Bild. Innerhalb eines Artikels oder einer Seite klickt man oben links auf “Dateien hinzufügen“, wählt anschließend “Dateien hochladen” und klickt auf den “Dateien auswählen“-Button um die Video / Audio Datei auf seinem PC zu suchen oder wirft sie direkt per Drag ‘n Drop in den “Uploadbereich”.

Nach erfolgreichem Hochladen befindet sich unten rechts ein kleines Dropdown-Menü, welches auf “Eingebundener Medien-Player” gestellt sein muss. Nun auf den blauen Button “In den Beitrag einfügen” klicken und das Video befindet sich in eurem Artikel:

Der Shortcode dazu sieht wie folgt aus:

Neben der Größe und der Breite werden automatisch das Format, sowie die passende URL angegeben. Für einen HTML5/Flash-Fallback können ebenfalls weitere URLS angegeben werden, so würde der Shortcode in etwas so aussehen.

Audio Dateien in WordPress einbinden

Mit Audio Dateien ist es genau wie bei den Videos. Zunächst wird die Audio Datei über den Button “Dateien hinzufügen” hochgeladen und folgendes Snippet eingefügt:

Die neue WordPress Audio/Video API ist noch um ein vielfaches umfangreicher, als wirklich nur ein Video oder eine Audio Datei einbinden.

WordPress mit Dreamweaver bearbeiten und analysieren

19. November 2013adminSEOanalysieren, bearbeiten, dreamweaver, wordpress

[youtube_sc url=“http://www.youtube.com/watch?v=3pCvzRey5Aw“ theme=“light“ modestbranding=“1″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″ hd=“1″]

Convert HTML to WordPress

28. August 2013adminSEOconvert, html, webdesign, wordpress

Per Software: HTML2WP-Plugin

http://www.gethtml2wp.com/index.shtml?aid=47546&gr=3077&t=default

oder manuell:

When I first decided to convert a static HTML design to WordPress I did some searching for a tutorial to help me get started with the basics. Surprisingly, I didn’t find anything that was very complete or easy to follow. For that reason I decided to write a very basic tutorial on how to convert a static HTML template into a WordPress Theme. If you are an absolute beginner at developing WordPress themes then this should help you get started. This tutorial assumes you already have a basic understanding of HTML and CSS. It also assumes you have a website built in HTML and CSS and have it ready for conversion.

How WordPress Works

WordPress works in a rather straightforward manner but it may seem confusing if you are completely new to the concept. WordPress relies on PHP to call on different parts of your content from the database management system it stands on. For example, look in your /wp-content/themes/twentythirteen/ directory and open the header.php file. As you scroll through the code notice the PHP calls, they start with a <?phpand end with a ?>. Look at line 37:

<h1><?php bloginfo( 'name' ); ?></h1>

This line uses PHP to look-up your blog’s name from the database and display it. This basic function of retrieving or calling some kind of data from your database and using PHP to display it in your HTML is how WordPress works. Throughout this process you will be substituting PHP for different parts of your content and your code. This will make editing easier in the long run, as you will find out. Now that you understand the basics of how WordPress works, lets get started.

First Things First

The first step is to create a new folder and name it whatever you want your theme to be called. Next, create two new files, style.css andindex.php and place them in the folder. Believe it or not, these are the only two files you actually need for a WordPress theme. Now copy and paste the code from your original CSS file into the style.css file you just created. At the top add the following code:

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

These comments simply help WordPress properly identify the theme. Your stylesheet is now ready to go.

Chop It Up

Now let’s start chopping up your HTML. Remember how we talked about WordPress using PHP to call data from your database? WordPress can also use PHP to call different files from within your template folder. Imagine your current HTML code chopped up into 4 (or more) different sections. For example, take a look at the layout and corresponding HTML of this page. The header comes first, followed by the content, and finally the footer. Instead of keeping these 3 parts of the HTML together in one file, you are going to put each of them in their own separate file. Then call on them one by one using PHP.

So go ahead and sort through your HTML code and place some markers in the 3 or 4 places where you plan on cutting the code into separate sections.

These next steps assume you have your page set up left to right: header, content, sidebar, footer. If your page is ordered differently you will have to switch a couple of these steps around.

Now create 3 new files (header.php, sidebar.php, footer.php) and place them in your theme directory. Next take a look at the header.php file from the Twenty Thirteen theme we looked at earlier. Notice all the PHP that is used in between the <head> tags. Copy that code to your new header.phpfile. Now open up your original HTML file and copy the code you marked off for your header (1st section) into your new header.php file (underneath the <head> section). Save and close.

Now open up your new index.php file. Copy the second part of your original HTML code, the content (2nd section) into your new index.phpfile. Save and close.

Getting the hang of it?

Next open up your new sidebar.php file, copy the sidebar (3rd section) of your original code into the sidebar.php file. Finally, copy the original footer (4th section) of code into your new footer.php file.

Put It Back Together

Your original code should now be chopped up into 4 different files (header.php, index.php, sidebar.php, footer.php). Let’s put it back together using a few lines of PHP. Open up your index.php file, it should contain the HTML from the content (2nd section) of your original code. Add this line at the very top of the file:

<?php get_header(); ?>

Now go to the absolute bottom of your index.php file and add these two lines:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

These 3 simple lines of PHP are telling WordPress to fetch and display your header.php, sidebar.php, and footer.php files within your index.phpfile. Your code is now officially put back together. Now, if you want to edit your sidebar you can just edit your sidebar.php file, instead of sorting through your index.php to find it. The same goes for your header.php and your footer.php.

The Loop

Your index.php is almost finished. The final step is to insert the actual content into the code. Luckily, WordPress uses PHP for this as well. The Loop is the PHP function WordPress uses to call and display your posts from the database they are saved in. Grab this code and paste it into your new theme’s index.php file (inside of whichever div you are using to hold your content).

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div>
        <div><?php the_time( 'M j y' ); ?></div>
        <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
        <div><?php the_author(); ?></div>
    </div><!--end post header-->
    <div>
        <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
        <?php the_content(); ?>
        <?php edit_post_link(); ?>
        <?php wp_link_pages(); ?>
    </div><!--end entry-->
    <div>
        <div><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
    </div><!--end post footer-->
  </div><!--end post-->
<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
  <div>
    <div><?php next_posts_link( 'Older Entries' ); ?></div>
    <div><?php previous_posts_link( 'Newer Entries' ); ?></div>
  </div><!--end navigation-->
<?php else : ?>
<?php endif; ?>

You just inserted a basic version of the loop into your code! WordPress will use the loop to display your posts and comments on your website.

The End

Now upload your theme folder to /wp-content/themes/. Then log into WordPress and activate your theme. Wasn’t that easy?

This tutorial covered the basics for converting your theme to WordPress. To further customize and enhance your theme start looking at theWordPress Codex, specifically Template Tags and Template Files. You can use template tags in your sidebar, in your header, or your footer to call menus, categories, posts, etc. As you learn more about template tags and template files you will discover the endless possibilities for customizing your new WordPress blog.

.PSD Photoshop-File zu WordPress Theme

[youtube_sc url=“http://www.youtube.com/watch?v=Zd2wOEnTNU8″ theme=“light“ modestbranding=“1″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]

[youtube_sc url=“http://www.youtube.com/watch?v=-VnTEkhfYSM“ theme=“light“ modestbranding=“1″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]

WordPress Dashboard – wp-admin: Error 500 – Internal server error

17. Mai 2013adminAllerleidashboard:, error:, internal, server, webdesign, wordpress, wp-admin:

If your in the unfortunate position of receiving a

“Error 500 – Internal server error

An internal server error has occured!

Please try again later.”

This seams to happen regularly on a lot of servers when ever you increase the amount of plug-ins you activate in your WordPress blog .

If so, then hopefully this will help!

A lot of my subscribers have had this very problem and asked me if i had a fix. It seamed that a lot of them who where having this problem where hosting their wordpress blog with 1&1, and the problem seamed to start after updgrading to versio 2.7 of wordpress.

After a few hours of investigations, I have found an answer that seams to help anyone with an 1&1 account, but the solution should also be tried if using another Hosting Provider.

Firstly create a new file in notepad or similar and enter the following:
php_flag register_globals off
register_globals = 0
memory_limit = 64M
Save this file as php.ini and upload it to your /wp-admin/ directory of wordpress

That’s it, simple wasn’t it ?

Apparently this has to do with some host servers generally limiting the php access to under 8MB, which is clearly not enough if you are installing a lot of plugins at once.

Also, if this doesn’t work for you, you could try editing or create an .htaccess if one is not already present. This will make sure that your php files will run with php5, this can be true if Apache by default is running an earlier version of php.

Just put the following lines in the file on its own lines:

AddType x-mapp-php5 .php
AddHandler x-mapp-php5 .php

The .htaccess file is usually to be found in the root directory of your wordpress blog or website, and is simply a text file that can be edited with Notepad or similar, but do ensure you save it as .htaccess and not a .txt file.

NOTE: If you already have an .htaccess, then just edit this file, DO NOT over write it, as the contents may be required for other usage, if you dont have one then just create a new one.

(do remember to put the dot before the htaccess when naming the file)

Hope this fixes your problem!

WordPress Spamschutz: Mit dem kostenlosen Plugin Antispam Bee den eigenen Blog vor Spam schützen

10. Januar 2013adminSEOantispam, eigenen, kostenlosen, plugin, spamschutz:, wordpress

WordPress ist als Software die “Mutter aller Blogs” und millionenfach im Einsatz. Von Haus aus bietet die kostenlose Anwendung mit dem Plugin Akismet einen Schutz vor unerwünschten Kommentaren, die nichts anderes im Sinn haben, als für obskure Seiten Werbung zu machen. In Deutschland ist der Einsatz von Akismet allerdings aus Sicht der Datenschützer nicht gestattet – Abhilfe schafft hier das ebenso sichere Plugin

Antispam Bee von Sergej Müller

, das im Gegensatz zu Akismet auch für kommerzielle Blogs kostenlos erhältlich ist. Es speichert keine personenbezogenen Daten und nutzt keine fremden Server für das Speichern von Daten.

Datenschützer freuen sich über Antispam Bee, weil es keine IP-Adressen festhält und weder Cookies noch Timeouts verwendet. Es verhindert auf Wunsch Kommentare in bestimmten Sprachen und aus vorher festgelegten Ländern. Die Informationen dazu holt sich das Plugin für WordPress aus einer öffentlichen Spammer-Datenbank. Eines der Highlights der Anwendung ist das unsichtbare Hinzufügen eines Feldes im Formular für Kommentare: Nur die automatisierten Spam-Bots lesen dieses Feld und füllen es aus. Sobald dies der Fall ist, erkennt Antispam Bee den Spam-Versuch und merkt sich die IP-Adresse.

antispam-1

Etliche Plugins erfordern das Anpassen von Theme-Templates – Antispam Bee kommt ganz ohne Eingriff in das Template aus. Klicken Sie im Admin-Bereich auf den Button für die Plugins, wählen Sie “Installieren” und geben Sie in der Suche “Antispam Bee” ein. Nach einem Klick auf “Installieren” und anschließend auf “Aktivieren” finden Sie unter Einstellungen die Auflistung von Antispam Bee. Dort können Sie in einem übersichtlich gestalteten Menü Ihre persönlichen Einstellungen treffen.

antispam-2

Zwei Tipps: Die meisten Spam-Kommentare sind in englischer Sprache. Sollte Ihr Blog ausschließlich auf Deutsch sein, wählen Sie in den Einstellungen “Kommentare nur in einer Sprache zulassen” und klicken Sie im Feld auf “Deutsch.”

antispam-3

Ihr Blog ist gut besucht? Dann legen Sie in den Einstellungen fest, dass Antispam Bee Ihnen keine Mail nach dem Eintreffen eines Spam-Kommentars sendet.

Übrigens: Auch wir setzen hier bei Tipps-Tricks-Kniffe AntiSpam Bee ein. Mit Erfolg: Die fleißige Biene bewahrt uns pro Tag vor rund 1.000 Spam-Kommentaren und lässt sie erst gar nicht durch. Wie viele Kommentare Antispamm Bee abfängt sehen Sie im WordPress-Dashboard. Im Dashboard-Bereich “Auf einen Blick” sehen Sie zudem, wie viele Spams der Spamfilter insgesamt herausgefischt hat.

antispam-bee-dashboard-anzahl-spams

WordPress manuell aktualisieren: So funktionierts.

19. Oktober 2012adminAllerleiaktualisieren:, funktionierts, manuell, webdesign, wordpress

1. Alle Daten sichern

» Erstelle ein Backup deiner WordPress-Datenbank. Am einfachsten geht das mit einem Plugin wie WordPress Database Backup.
» Erstelle ein Backup aller WordPress-Dateien. Am besten verwendest du dafür ein FTP-Programm wie FileZilla. Lade sämtliche Dateien aus dem WordPress-Basis-Ordner und die Ordner wp-admin, wp-content und wp-includes auf deine Festplatte herunter.

2. Plugins deaktivieren

» Logge dich in den Admin-Bereich deiner WordPress-Installation ein und deaktiviere alle Plugins.
» Wenn du möchtest, dass deine Besucher nichts vom Update-Prozess mitbekommen, kannst du ein Plugin wie WP Maintenance Modeinstallieren und während der Aktualisierung aktiv lassen.
» Verlasse den Admin-Bereich (abmelden).

3. Aktuelle WordPress-Version herunterladen

» Falls du es nicht schon getan hast, solltest du spätestens jetzt die aktuelle WordPress-Version herunterladen und entpacken. Die neuste deutschsprachige Version findest du hier: WordPress herunterladen.

4. Alte Dateien löschen

» Lösche den Ordner wp-admin. Am besten verwendest du dafür wieder das FTP-Programm.
» Lösche den Ordner wp-includes.
» Lösche alle Dateien im Basis-Ordner (wp-cron.php, wp-login.php, etc.) mit Ausnahme von wp-config.php und .htaccess. Die Datei wp-config.php enthält sämtliche Datenbank-Informationen, deshalb darfst du sie auf keinen Fall löschen.
» Den Ordner wp-content kannst du ebenfalls unangetastet lassen.

5. Neue Dateien hochladen

» Lade den Ordner wp-admin hoch.
» Lade den Ordner wp-includes hoch.
» Lade alle Dateien aus dem Basis-Ordner hoch. Achtung: Sollte die neue Version aus irgendwelchen Gründen eine config.php-Datei enthalten, lade sie bitte nicht hoch. Auch deine .htaccess-Datei solltest du nicht überschreiben.

6. Update abschliessen

» Öffne die URL http://www.deineseite.com/blog/wp-admin/upgrade.php in deinem Browser.
» Falls du dazu eingeladen wirst, dich einzuloggen, dann logge dich ein.
» Möglicherweise wirst du jetzt dazu aufgefordert, deine Datenbank zu aktualisieren. Klicke auf den entsprechenden Button, um das Datenbank-Update zu genehmigen.
» Aktiviere deine Plugins. Es kann sein, dass einige deiner Plugins mit der neuen WordPress-Version nicht mehr funktionieren. In diesem Fall solltest du die aktuellste Version des Plugins herunterladen und installieren.
» Das wars! Das Update ist fertig.

WordPress: Admin Passwort vergessen

5. April 2012adminAllerleiadmin, passwort, vergessen?, webdesign, wordpress

Jeder wird sicherlich schonmal Passwörter vergessen haben, Gott sei Dank gibt es die Passwort zurücksetzen Funktion bei den meisten Webportalen. Problematisch wird es nur wenn man dasWordPress Admin Passwort vergessen hat, es gibt zuerstmal keine Möglichkeit das Passwort zurückzusetzen, außer Sie haben Zugriff auf Ihre Datenbank.
In den meisten Fällen werden die Datenbanken mit phpMyAdmin verwaltet. Schaffen Sie sich Zugriff zu Ihrer WordPress bzw. Blogdatenbank und suchen Sie die Tabelle wp_users.

In dieser Tabelle sollten Sie jetzt alle angelegten Benutzer sehen und unter dem Feld user_pass sehen Sie eine komische Zeichenfolge, eine MD5 Verschlüsselung.

Klicken Sie bei Ihrem Account auf den kleinen Stift an der linken Seite der Zeile. Suchen Sie jetzt das Feld user_pass und ändern Sie hier die Funktion in MD5 und geben Sie ganz einfach ein neues Passwort indem Textfeld ein.
Nach der Eingabe des neues Passworts bestätigen Sie die Eingabe mit einem Klick auf den OK Button.

Wenn alles funktioniert hat sollten Sie sich jetzt mit Ihrem neuen Passwort einloggen können.

WordPress Plugins

29. März 2012adminSEOplugins, wordpress

[csv id=4]

[csv id=5]

[csv id=6]

[table id=1 /]

FTP-Daten in WordPress speichern

26. März 2012adminAllerleiftp-daten, speichern, wordpress

Bereits seit der WordPress Version 2.5 ist es möglich die eigenen FTP-Daten in der wp-config.php zu hinterlegen. Ich persönlich speicher die Daten nicht, sondern gebe mein Passwort für jedes Update manuell ein.
Vervollständigt die folgenden Daten tragt diese dann in eure wp-config.php ein

define('FTP_HOST', 'ftp.deineseite.de');
define('FTP_USER', 'DeinBenutzername');
define('FTP_PASS', 'DeinPasswort');
define('FTP_SSL', false); //true für SLL-Verbindung

WordPress Zeilenumbruch / Leerzeile

21. Februar 2012adminAllerleileerzeile, webdesign, wordpress, zeilenumbruch

Wer sich schon immer über die fehlende Interpretation der br- oder p-tags im Standard-Wordpress Editor geärgert hat (mehrere leere Zeilen oder Zeilenumbrüche), dem sei mit einem kleinen Codeschnippsel im Artikeltext geholfen.

Einfach in den Text nach belieben in der html-Ansicht des Editors einfügen:

   <br class="clear" />

Der Effekt ist eine erzwungene “echte” Leerzeile zwischen zwei Absätzen. Der Befehl lässt sich auch mehrmals nacheinander anwenden, um einen weiteren Abstand zu schaffen.

WordPress aufräumen und Performance verbessern mit WP CleanFix

18. Oktober 2011adminAllerleicleanfix, performance, verbessern, webdesign, wordpress

WordPress ist eigentlich eines meiner echten Lieblings Systeme wenn es um Internetseiten geht. Es ist schnell, stabil, schlank und kommt mit unglaublich vielen PlugIns daher. Besonders cool ist es auch, dass man eigentlich nichts wirklich zerstören kann, es werden immer wieder Backups und Revisionen angelegt. Aber genau hier liegt auch der Hase begraben. Durch all diese Backups wird die Datenbank immer größer. Dies wiederum hat zur Folge, dass eine Seite auch immer langsamer läd um Laufe der Zeit. Hin und wieder muss man also einfach aufräumen!

Man kann hierzu den Weg über PHPMyAdmin gehen und die Datenbankenträge selbst löschen, weiter kann man alle ungenutzten Bilder, Kategorien und Schlüsselwörter auch selbst entfernen… Eine Menge Arbeit! Hierfür gibt es aber auch ein seht gutes PlugIn Namens WP CleanFix. Hiermit werden nahezu alle möglichen “Schrauben” gedreht, die den Blog wieder schneller machen und eben von all dem Datenmüll befreien. Wie das nun genau geht, habe ich in einem neuen Videotutorial auf hoTodi.tvgenauestens beschrieben.