Kategorien
Wordpress

Coole und sinnvolle WordPress PlugIns

Nach einer WordPress Installation kann der Administrator das Backend um einige kleine aber durchaus sehr sinnvolle PlugIns ergänzen. Das habe ich hier auf der Instanz auch getan. Heute möchte ich euch diese kleinen Helfer kurz vorstellen.

Als erstes, die Simple Lightbox. Das ist eine kleine, anpassbare Lightbox die leicht als PlugIn einer WordPress Installation hinzugefügt werden kann.
Die wichtigsten Eigenschaften sind automatisch aktivierte Links, eine Anpassung auf das aktive Fenster, mit Themes anpassbar, Animationen, benutzbar für Widgets und vieles mehr.

Weiterhin habe ich im Vergleich zu meiner alten Joomla Installation die Anzeige vermisst wann ein Artikel zuletzt geändert wurde. Hier hilft das PlugIn WP Last Modified Info. Es kommt vor das Beiträge nicht nur neu erzeugt werden.

WP Last Modified Info
WP Last Modified Info

Oftmals ändere oder ergänze ich auch vorhandene Beiträge. Das PlugIn erzeugt in der Beitragsübersicht eine zusätzlich Spalte mit dem Datum der letzten Änderung.

Das Dritte dieser kleinen PlugIns ist FBC Latest Backup for UpdraftPlus. Dieses erfordert UpdraftPlus als Backupsoftware für eure WordPress Seiten. Das WordPress-Plugin, fügt dem Dashboard ein Widget hinzu, das Datum und Uhrzeit der letzten Sicherung anzeigt und wie viele Änderungen seitdem vorgenommen wurden.

FBC Latest Backup for UpdraftPlus
FBC Latest Backup for UpdraftPlus

Wenn euch selbst noch kleine aber sinnvolle und nützliche PlugIns einfallen, so schreibt mir bitte. Vielen Dank.

Kategorien
Webentwicklung Wordpress

WordPress: Dein Weg zum Erfolg im Digitalen Leben

Wordpress Logo Schwarz/Weiss

Für eine tiefere Einarbeitung in ein Thema bevorzugte ich die analoge Version, so auch bei WordPress. Ein Buch musste her.

Was war mein Ziel?

  1. WordPress umfassend kennenlernen!
  2. Anpassung von Funktionen und Design!
  3. Fundierte Empfehlungen für einen laufenden Betrieb!

Nach etwas suchen bin ich auf ein Buch des Verlages “Rheinwerk” aufmerksam geworden.

https://www.rheinwerk-verlag.de/einstieg-in-wordpress/

In zwei Wochen habe ich das Buch gelesen und bin immer noch begeistert! Sehr zu Empfehlen.

Kategorien
Stylesheets Webentwicklung

CSS Hacks: Entdecken Sie die vielfältigen Möglichkeiten

CSS Programming Image
IE7 Zoom Funktion

Im IE7 können sie außer der Schriftgröße auch die ganze Seite zoomen, inklusive Grafiken und anderer Elemente. CSS Hacks beheben das Problem von Links im Text die mit einem HOVER Effekt versehen werden und diesen eine Hintergrundfarbe zugewiesen wurde. Dann kann es passieren, dass diese Hintergrundfarbe beim zoomen nicht mehr über den Links positioniert ist und sich auch der Text verschiebt.

Kategorien
Wordpress

Security Check und Zustand in WordPress

Einführung

Nach dem ihr eure WordPress Installation fertiggestellt habt werdet ihr im Dashboard mit einer Unmenge an Informationen überschüttet. Ein Teil davon ist der Zustand eurer neu erstellten Webpräsenz. Es geht hier um den Zustand und einen Security Check der Website.

Dafür existiert ein Administrator Element. Das zeigt euch wichtige Daten über eure Installation. Einige davon sind wirklich wichtig um einen stabilen und sicheren Betrieb eurer Webseite zu gewährleisten.

Aufgaben

Die wichtigsten Teile des Zustandsberichtes sind die Aktualität der WordPress Version. Hier solltet ihr immer die aktuelle Produktiversion installiert haben. Eine Ausnahme wäre hier, es gibt PlugIns oder Templates die eine Aktualisierung verhindern. Oder die Webseite dient für Testzwecke, dann können auch Beta-Versionen installiert sein.

Das Gleiche gilt für Themes und Plugins. Die PlugIns bieten die Option der automatischen Aktualisierung. Nutzt diese Optionen, so habt ihr weniger zu tun wenn etwas Neues erscheint. Hierbei aus Sicherheitsgründen immer ein Backup zuvor erzeugen. Falls sich doch mal ein Fehler unbemerkt eingeschlichen hat.

Mein Webhoster released auch aktuellere PHP Versionen von Zeit zu Zeit. Beachtet dies bei eurem Provider oder Server. Testet die neuen Versionen auf einer Testinstanz oder einer weniger wichtigen Website.

Auch wenn auf einer WordPress Seite vieles automatisiert erfolgen kann, werft regelmäßig einen Blick auf eure Installationen. Alles können Scripte nicht abfangen.

Die Grundlage einer jeden WordPress Seite ist die Datenbank. Prüft regelmäßig den Zustand und die Datenbankversion.

Weitere Aufgaben wären,

  • sind automatische Aktualisierungen auch für neue Themes und PlugIns aktiv?
  • ist der Cache aktiv?
  • sind Mail Domain Konfigurationen korrekt eingetragen? Auch wenn funktionell keine Fehler vorliegen. Oft sind separate Konfigurationen wie DNS nachzupflegen.

Was noch?

Sollte auf einer Website ein SEO PlugIn installiert sein, so reporten die Tools weitere Informationen. Die Berichte sind mehr für einen erfolgreichen Betrieb entscheidend.
Das wären Seitentitel, Taglines. Wird die Seite von Suchmaschinen indiziert?

Nach einer erfolgreichen Installation ist der Bericht der Website interessant. Hier werden noch einmal alle Parameter und Eigenschaften gelistet. Wenn man als Neuanfänger mit WordPress nicht alles versteht, fragt das Internet, Chatgruppen usw.
Oftmals hilft auch der direkte Link in der Beschreibung eines Problems weiter. Hier als Beispiel die Konfiguration eines permanenten Caches.

Vielleicht hat euch der Beitrag ein wenig geholfen einen Einstieg zu finden. Hinterlasst gern einen Kommentar hier.

Kategorien
CSS Templates Stylesheets Webentwicklung

CSS Vorlage Whiteberry 01 vorgestellt

Dieses Template und CSS Vorlage besteht aus einem #main Bereich von 800px. Die Zentrierung erfolgt über automatische Ränder. Der Contentbereich #content_aussen ist 480px breit. Darüber befindet sich noch das #topmenue. Als Doctype verwende ich xhtml-strict.

CSS Template Whiteberry 01
#main {
margin:0;
padding:0;
margin:0px auto;
text-align:left;
width:800px;
}

Das Mainmenue und der Contentbereich werden mittels float angeordnet. Der Contentbereich umfliesst das Mainmenue. (float:right;)

Die Überschriften des Mainmenues werden formatiert mittels:

#mainmenue p.headermenue{
text-align:right;
margin:0;
padding:0;
padding-top:5px;
padding-right:20px;
height:25px;
font-size: 16px;
color:#FFFFFF;
background:transparent_
url(../images/bg-mainmenue.jpg)_
center right no-repeat;
}

In dem Hintergrundbild sind Rundung und Verlauf enthalten.

Eine Besonderheit sind die Rundungen im oberen Bereich des Contents. Diese verwenden -moz-border-radius und sind somit nur für den Mozilla/Firefox. Sollte CSS3 mal bei den meissten Browsern implementiert sein, kann man das problemlos ersetzen.

#content_top {
margin:0;
padding:0;
margin-top:5px;
text-align:left;
width:480px;
height:400px;
background:transparent_
url(../images/bg-content-top.jpg)_
center center no-repeat;
border:10px solid #8FB5D9;
border-bottom:10px solid #8FB5D9;
-moz-border-radius-topleft:30px;
-moz-border-radius-topright:30px;
}

Die Überschriften und der p-tag sind vorformatiert. Ihr könnt aber alles anpassen und nach Euren Wünschen veraendern.

Dieses Template ist CSS validiert (bis auf den border-radius des oberen Contentbereiches).

47 kB

Kategorien
Wordpress

WordPress-Seite einrichten: Schritt-für-Schritt-Anleitung

Ihr wollt eine WordPress Installation anlegen? Wisst aber nicht wie? Dann gebe ich euch hier eine Anleitung. Verfolgt die Schritt für Schritt Anweisungen und in wenigen Minuten steht eure neue Webseite bereit.

Voraussetzungen:

Ein Webhoster muss vorhanden sein, ihr könnt WordPress auch als Test auf eurem Computer installieren, hier sind die Vorbereitungen etwas anders als hier dargestellt.
Ich gehe hier von einem Hosting Paket aus. Internetzugriff wäre auch nicht schlecht.

Vorbereitungen:

Legt euch auf eurem Webspace mit FTP ein Verzeichnis an.

Bereitet eine Datenbank vor, mit Namen, User und Passwort. Das benötigt ihr in den nächsten Schritten.

Für eine Neuinstallation ladet ihr euch von wordpress.org die Installationsdateien. Stellt diese im angelegten Verzeichnis bereit. Entpackt müssen die Daten dort vorliegen.

Für einen komfortablen Zugriff legt euch eine Domain oder Subdomain an. Diese muss auf das zukünftige WordPress Verzeichnis verweisen.

Installation:

Weiter in der Schritt für Schritt Anweisung. Aufruf der Installation über den Browser mit

%Doaminname%/wp-admin/setup-config.php

An der Stelle geht es jetzt richtig los.

Schritt 1:

Im ersten Schritt deiner WordPress Installation erhältst du eine Zusammenfassung was du für eine erfolgreiche Installation benötigst.

Wordpress-Installation-Schritt-1
WordPress-Installation-Schritt-1

Schritt 2:

Auf der zweiten Seite kommen die Datenbankinformationen. Auch der Tabellenpräfix kann hier angepasst werden. Das erhöht ein klein wenig die Sicherheit deiner Installation.

WordPress-Installation-Schritt-2

Schritt 3:

An der Stelle wird es ernst. Alle Daten sind vorhanden, du kannst loslegen.

WordPress-Installation-Schritt-3

Schritt 4:

Hier geht es um deine Website. Der Titel wird benötigt, den kannst du hinterher ändern wenn du an der Stelle noch nicht weißt wie er sein soll. Wichtig auf jeden Fall die Admin Kennung einschließlich Passwort für den Zugriff auf die Administrator Oberfläche. Ganz untern kannst du Suchmaschinen davon abhalten diese Webseiten zu indizieren. Auch das kann später im Administratorbereich ändern.

WordPress-Installation-Schritt-4

Schritt 5:

Deine Installation ist erfolgreich verlaufen. Nun ist eine Anmeldung an den Administrator Bereich möglich.

WordPress-Installation-Schritt-5

Schritt 6:

Das nächste Fenster ermöglicht euch direkt an der gerade erfolgten Installation anzumelden. Passwort ist jenes was ihr in Schritt 4 vergeben hattet.

WordPress-Installation-Schritt-6

Schritt 7:

Nach der Anmeldung werdet ihr zuerst auf die Dashboard Ansicht geleitet. Oft werdet ihr aufgefordert eingebundene Module oder PlugIns zu aktualisieren.

Wordpress-Installation-Schritt-7
WordPress-Installation-Schritt-7

Aktuell startet eine neu installierte Seite mit dem Template “Twenty-Twenty-Three”. So wie hier im Bild zu sehen. Dies kann in zukünftigen Versionen jedoch anders sein.

Wordpress-Installation-Live-Site
WordPress-Installation-Live-Site

Fertig!

Viel Erfolg damit und hinterlasst gern einen Kommentar.

Kategorien
CSS Templates Stylesheets Webentwicklung

CSS Vorlage DesertSand 01 vorgestellt

Dieses Template (CSS Vorlage DesertSand) verwendet eine fixe Breite von 650 px und wird zentriert dargestellt.

#main {
width: 650px;
margin: auto;
margin-top:5px;
text-align:center;
}
Kategorien
Wordpress

Meisterhaft migrieren: Der ultimative WordPress Umzug

migrieren

Der Prozess der Migration (migrieren) zu WordPress kann eine anspruchsvolle Aufgabe sein, aber mit der richtigen Anleitung und den passenden Schritten kann er reibungslos und erfolgreich durchgeführt werden. In diesem Artikel erfahren Sie, wie Sie Ihren Website-Inhalt und Ihre Einstellungen sicher von einer anderen Plattform zu WordPress übertragen können. Wir werden Ihnen die besten Praktiken, Werkzeuge und Tipps vorstellen, um sicherzustellen, dass Ihr WordPress-Umzug reibungslos verläuft und Ihre Website schnell und effizient online ist. Bereiten Sie sich darauf vor, WordPress meisterhaft zu nutzen und Ihren Website-Umzug zum Erfolg zu führen.

FG Joomla to WordPress

A plugin to migrate categories, posts, tags, images and other medias from Joomla to WordPress

Anbieter des Plugins

Dieses Plugin migriert Abschnitte, Kategorien, Beiträge, Bilder, Medien und Tags von Joomla nach WordPress. Es wurde mit den Joomla-Versionen 1.5 bis 4.0 und WordPress 6.1 auf großen Datenbanken getestet. Es ist mit Multisite-Installationen kompatibel.

Zu den Merkmalen gehören:

  • Joomla-Abschnitte werden als Kategorien migriert
  • migriert Kategorien als Unterkategorien
  • kopiert Joomla Beiträge (veröffentlichte, unveröffentlichte und archivierte), das könnt ihr in den Einstellungen zur Migration konfigurieren
  • lädt alle Beitragsmedien in WP-Upload-Verzeichnisse hoch (optional oder als eigenen Migrationslauf)
  • lädt externe Medien hoch (optional)
  • ändert den Beitragsinhalt, um die Medienlinks beizubehalten
  • anpassen der Größe von Bildern gemäß den in eurer Wordpess Instanz definierten Größen
  • definiert das vorangestellte Bild als erstes Beitragsbild, hier ist es mit Sicherheit erforderlich die Beiträge zu prüfen
  • behält das alt image-Attribut und behält die Bildunterschrift bei der Übertragung, hier müsst ihr evtl. Korrekturmöglichkeiten finden.
  • passt die internen Links an
  • Meta-Keywords als Tags in WordPress mit Seitenumbrüchen
  • kann Joomla Artikel als Beiträge oder Seiten importieren, hier müsst ihr euch entscheiden vor dem Start der Migration

Bei meiner Migration habe ich dieses Plugin mehrfach verwendet und es hat jedes mal wie gewünscht funktioniert.

Nachteil: eine Auswahl welche Daten (Beiträge oder Seiten oder Teile davon) migriert werden sollen war mir nicht möglich. Hierfür müsste die Migration in ein Testsystemerfolgen und von dort aus in ein Produktivsystem.

Ablauf

Alternativ wäre es auch möglich, in der Quelle die Beiträge zu archivieren, anstatt sie direkt zu migrieren. Infolgedessen muss man mehrere Läufe mit diesem Tool starten. Zusammenfassend lässt sich sagen, dass bei kleineren Seiten ein einziger Lauf ausreicht.

Zusammenfassung

Verglichen mit einer manuellen Übernahme ist es eine echte Erleichterung. Aussortieren kann man die Seiten oder auch Beiträge in der neuen WordPress Instanz. Diese sollte ja ohnehin zu dem Zeitpunkt nicht online sein.

https://wordpress.org/plugins/fg-joomla-to-wordpress/

Kategorien
Stylesheets Webentwicklung

Boxen effektiv horizontal Zentrieren: Tipps und Tricks

html code beispiel

Container oder Box zentrieren

Um eine Box mittig zum übergeordneten Objekt auszurichten, zu zentrieren, sind mir zwei unterschiedliche CSS Formatierungsmöglichkeiten bekannt. Auf diese werde ich hier eingehen.

Die Technik des horizontalen Zentrierens von Boxen ist ein fundamentales Element im Bereich des Webdesigns und der Gestaltung von Printmedien. Sie wird angewandt, um sicherzustellen, dass spezifische visuelle Elemente, häufig in Form von Boxen oder Abschnitten, harmonisch in der Mitte der horizontalen Achse positioniert werden. Diese Ausrichtung spielt eine entscheidende Rolle bei der Schaffung eines ästhetischen Gleichgewichts und gewährleistet, dass die präsentierten Inhalte ansprechend und leicht verständlich für die Betrachter sind.

Unsere Überschrift “Effektives Horizontales Zentrieren von Boxen: Tipps und Tricks” verspricht, Ihnen dabei zu helfen, diese gestalterische Herausforderung auf effiziente Weise zu meistern. In diesem Artikel bieten wir eine breite Palette von Ratschlägen, Techniken und bewährten Methoden, um Boxen, Abschnitte oder Inhalte auf professionelle Weise horizontal zu zentrieren. Beim Lesen dieses Artikels werden Sie lernen, wie Sie Ihre Designs ansprechender gestalten können, unabhängig davon, ob es sich um Webseiten, Poster, Flyer oder andere Grafikprojekte handelt.

Möglichkeiten

Wir werden verschiedene Herangehensweisen zur horizontalen Zentrierung von Boxen vorstellen, einschließlich CSS-Methoden und Techniken, die in Grafikdesign-Software verwendet werden. Zudem werden wir praktische Beispiele und Anwendungsfälle bereitstellen, um zu verdeutlichen, wie Sie diese Tipps und Tricks in Ihrer eigenen Arbeit effektiv umsetzen können.

Die Anwendung dieser Prinzipien wird nicht nur die visuelle Attraktivität Ihrer Projekte steigern, sondern auch die Benutzererfahrung optimieren, da zentrierte Elemente oft als ausgewogen und professionell wahrgenommen werden.

Kategorien
Stylesheets Webentwicklung

CSS Boxmodell: Innen, Außen & Dimensionen

Das Boxmodell

Das Boxmodell: Mit CSS können Sie Elementen (feste) Breiten, Höhen und Abstände geben und diese nebeneinander positionieren.

Das CSS-Boxmodell ist ein grundlegendes Konzept in der Webentwicklung, das die Darstellung und das Layout von HTML-Elementen beschreibt. Es behandelt jedes HTML-Element als eine rechteckige Box, die aus mehreren Schichten besteht:

  1. Inhalt (Content): Dies ist der tatsächliche Text, die Bilder oder andere Elemente, die innerhalb des HTML-Elements platziert sind. Die Größe dieses Bereichs wird durch die Eigenschaften “width” und “height” gesteuert.
  2. Padding: Das Padding ist der Raum zwischen dem Inhalt und dem inneren Rand der Box. Es dient dazu, den Inhalt von den Rändern zu trennen. Sie können das Padding mit den Eigenschaften “padding-top”, “padding-right”, “padding-bottom” und “padding-left” anpassen.
  3. Border: Der Border ist eine Linie oder ein Rahmen, die die äußere Kante der Box umgibt. Sie können die Dicke, den Stil und die Farbe des Rahmens mit den Eigenschaften “border-width”, “border-style” und “border-color” steuern.
  4. Margin: Der Margin ist der Raum zwischen der äußeren Kante der Box und anderen Elementen auf der Webseite. Er sorgt für Abstand zwischen den Boxen. Die Größe des Margins wird mit den Eigenschaften “margin-top”, “margin-right”, “margin-bottom” und “margin-left” festgelegt.

Die Gesamtbreite und Höhe eines HTML-Elements werden durch die Summe von Inhalt, Padding, Border und Margin bestimmt. Das Boxmodell ermöglicht es Entwicklern, das Layout von Webseiten genau zu kontrollieren, indem sie diese Eigenschaften gezielt anpassen.

Das Boxmodell ist ein grundlegendes Konzept in der Webentwicklung und spielt eine entscheidende Rolle bei der Gestaltung von Webseiten und der Positionierung von Inhalten.

Die rechteckigen Blöcke, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden, folgen einem Schema, dem „Boxmodell“. Es ist somit Grundlage jeden Layouts.

Jedes Block-Element wie Textabsätze (p), -Abschnitte (div, article, main, aside, …) und Überschriften (h1, h2, …) bildet eine rechteckige Box, die Sie frei formatieren können.

Beispiel:

overflow-x, overflow-y

Mit overflow-x und overflow-y kann der “Überlauf” eines Elementes(overflow) für jede Richtung einzeln eingestellt werden (also ob z.B. ein Scrollbalken angezeigt werden soll).

box-sizing

Mittels box-sizing kann eingestellt werden ob sich die Breite eines Elementes auf deren Inhalt oder auf Inhalt+Rahmen+padding bezieht. (Webkit: -webkit-box-sizing)

calc()

Die Eigenschaft calc(), die z.B. innerhalb einer CSS-Eingeschaft wie width oder height stehen kann, ist es möglich Breiten- und Längenangaben direkt auszurechnen.