USER-XY http://www.user-xy.de Webdesign und Webentwicklung Thu, 25 Aug 2016 08:26:44 +0000 de-DE hourly 1 Was sind PHP Variablenfunktionen? http://www.user-xy.de/was-sind-php-variablenfunktionen/ http://www.user-xy.de/was-sind-php-variablenfunktionen/#respond Thu, 18 Aug 2016 15:47:00 +0000 http://www.user-xy.de/?p=3891 Einen tolles Konstrukt von PHP den ich heute kennengelernt habe sind die Variablenfunktionen. Bekommt man einen Funktionsnamen aus irgendeinem Grund als String übergeben, kann man mit Hilfe der Variablenfunktionen diese Funktion trotzdem aufrufen. Hierzu muss man einfach den Funktionsnamen in geschweifte Klammern schreiben. Das hier drüber ist die Kurzschreibweise. Wem das nicht gefällt, oder wer den Funktionsnamen so wie so in einer Variablen stehen hat, …

The post Was sind PHP Variablenfunktionen? appeared first on USER-XY.

]]>
Einen tolles Konstrukt von PHP den ich heute kennengelernt habe sind die Variablenfunktionen. Bekommt man einen Funktionsnamen aus irgendeinem Grund als String übergeben, kann man mit Hilfe der Variablenfunktionen diese Funktion trotzdem aufrufen. Hierzu muss man einfach den Funktionsnamen in geschweifte Klammern schreiben.

$this->{'myFunc'}();

Das hier drüber ist die Kurzschreibweise. Wem das nicht gefällt, oder wer den Funktionsnamen so wie so in einer Variablen stehen hat, kann auch folgende Syntax verwenden.

$foo = new Foo();
$myFunc = "Variable";
$foo->$myFunc();

Wo können KEINE Variablenfunktionen verwendet werden?

ACHTUNG! Nicht in jedem Fall kann diese Schreibweise verwendet werden. Funktionen bei denen es nicht funktioniert sind beispielsweise echo, print, unset(), isset(), empty(), include und require. Hier müssen eigene Wrapperfunktionen geschrieben werden.

Für weitere Informationen und eine Liste der Funktionen die Variablenfunktionen erlauben, schaut doch einfach bei php.net vorbei. Hier findet ihr noch viele weitere Beispiele.

The post Was sind PHP Variablenfunktionen? appeared first on USER-XY.

]]>
http://www.user-xy.de/was-sind-php-variablenfunktionen/feed/ 0
jQuery-Tutorial: Einführung und Grundlagen http://www.user-xy.de/jquery-tutorial-einfuehrung-und-grundlagen/ http://www.user-xy.de/jquery-tutorial-einfuehrung-und-grundlagen/#comments Tue, 01 Apr 2014 08:40:15 +0000 http://www.user-xy.de/?p=1343 jQuery-Tutorial für Einsteiger Das Javascript-Framework jQuery wurde von John Resig entwickelt und zählt heute zu den beliebtesten Bibliotheken, nicht zuletzt wegen seiner einfachen Handhabung. Für alle, die einen Einstieg in die Welt von jQuery planen, habe ich hier eine Einführung in die Grundlagen von jQuery. jQuery wird auch als „AJAX-Framework“ bezeichnet. AJAX steht für Asynchronous JavaScript and XML) und bezeichnet den Vorgang der asynkronen Datenübertragung …

The post jQuery-Tutorial: Einführung und Grundlagen appeared first on USER-XY.

]]>
jQuery-Tutorial für Einsteiger

Das Javascript-Framework jQuery wurde von John Resig entwickelt und
zählt heute zu den beliebtesten Bibliotheken, nicht zuletzt wegen seiner
einfachen Handhabung.

Für alle, die einen Einstieg in die Welt von jQuery planen, habe ich hier eine
Einführung in die Grundlagen von jQuery.

jQuery wird auch als „AJAX-Framework“ bezeichnet. AJAX steht für Asynchronous JavaScript and XML) und bezeichnet den Vorgang der asynkronen Datenübertragung zwischen Server und Client. Für solche Aufgaben bietet jQuery viele Möglichkeiten.
Ein Beispiel für eine AJAX Anwendung findest du in meinem Artikel „Mit Ajax Content nachladen“.

jQuery eignet sich aber nicht nur für AJAX-Anwendungen, sondern auch sehr hervorragend für die DOM-Manipulation, also das ändern von HTML Elementen und deren Eigenschaften.

Das jQuery Projekt ist super dokumentiert und sollte immer in Reichweite sein. Die Dokumentation beinhaltet sehr viele Beispiele, bei denen man sofort den Verwendungszweck der ein oder anderen Methode sieht und versteht. Hier findet man die API-Documentation mit allen Informationen zu den Grundfunktionen, die jQuery bereitstellt.

jQuery-Tutorial Start:

Zu Beginn braucht man erstmal die jQuery Bibliothek. Sollte man permanenten Internetzugriff
haben kann man die aktuellste Version direkt von der jQuery Seite einbinden.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

Momentan existieren zwei Stände von jQuery. „jquery-1.11.0“ und „jquery-2.1.0“.
Die Version „1.11.0“ unterstützt im Gegensatz zu der neueren und etwas schlankeren Version
allerdings noch die Internet Explorer 6, 7, und 8. Wer also auf Abwärtskompatibilität Wert legt,
sollte sich für die „ältere“ Version entscheiden.

Will man sich eine Kopie der jQuery Bibliothek lokal auf seinen Rechner ziehen,
geht man am besten auf die Downloadseite von jQuery,
wählt die aktuelle Version aus, und kopiert den gesamten Quellcode direkt in eine leere .js-Datei. Diese muss dann nur noch in der Webseite eingebunden werden.

Die Einbindung der jQuery Bibliothek erfolgt im Headbereich des HTML-Dokuments. Erst nachdem die jQuery Bibliothek eingebunden ist, werden weitere JavaScript Dateien eingebunden.
Somit ist sichergestellt, dass man Zugriff auf die jQuery-Syntax und die Methoden hat.


<!DOCTYPE html>
<html lang="de-DE">
    <head>
         <title>jQuery Einführung</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
         <script type="text/javascript" src="js/functions.js"></script>
    </head>
    <body>

    </body>
</html>

jQuery-Tutorial Beispiele:

In folgenden Beispielen soll das Verständnis von jQuery etwas verdeutlicht werden. Auch will ich hier zeigen, auf welche unterschiedlichen Arten jQuery verwendet werden kann.

Prüfen ob jQuery geladen wurde:

if(typeof(jQuery) !== undefined){
	alert("jQuery wurde geladen");
}

jQuery Grundgerüst

In 98% der Fälle will man Elemente auf der Seite manipulieren. Hierzu muss der Zeitpunkt gewählt werden, an denen Sie alle geladen sind, um dann auf sie zugreifen zu können.

$(document).ready(function(){

});

Elemente mit jQuery ansprechen.

	$("#id").hide();
	jQuery("#id").hide();

Ein Element spricht man mit jQuery entwedert über das $-Zeichen, oder den Namen „jQuery“, gefolgt von runden Klammern, an.
Es gibt jetzt zwei Möglichkeiten, was in den runden Klammern stehen kann. Entweder, wie hier im Beispiel Anführungszeichen und einer ID, so wie man sie auch in CSS Dateien findet, oder man schreibt eine Variable hinein. Diese Variable steht dann NICHT in Anführungszeichen. Der Wert dieser Variablen, also, das was in der Variablen steht, sollte ein gültiger Selektor sein, wie man ihn auch im CSS verwenden kann. Nur dann ist sichergestellt, dass es nicht zu einem Syntaxfehler kommt.

jQuery VS. JavaScript:

jQuery

	$("p span");

JavaScript


for(var i = 0; i < document.getElementsByTagName("p").length; i++){
	for(var j = 0; j < document.getElementsByTagName("p")[i].getElementsByTagName("span").length; j++){
		document.getElementsByTagName("p")[i].getElementsByTagName("span")[i]
	}
}

An diesem Beispiel will ich verdeutlichen, wie viel Arbeit jQuery dem Anwender durch seine einfache Syntax und Struktur, abnimmt. Eine einfache Selektion von Elementen gestaltet sich in Javascript oft sehr schwierig, wie man an oberem Code-Beispiel sehen kann. Mit jQuery hingegen ist diese Selektion mit nur einer halben Zeile abgehandelt.

Elemente selektieren:

Elemente werden mit CSS-Logik selektiert.


$("#id").hide(); // Versteckt #id

$("section").hide(); // Versteck alle sections

$("section.class").hide(); // Versteck alle sections mit der Klasse class

$("section[rel]").hide(); // Versteck alle sections, die ein rel Attribut haben

$("section, article").hide(); // Versteckt alle article und section Tags

Um Metoden auf bestimmte Elemente anzuwenden, müssen diese selektiert, d.h. eingegrenzt werden. Dies funktioniert analog zu der CSS Selektion.

Reagiere auf ein click-Event

Alle p-Tags werden beim klick auf ein p-Tag ausgeblendet.

$("div p.click_to_hide_all").bind("click", function(){
   $("p.click_to_hide_all").hide();
});

Nur das p-Tag, auf das geklickt wurde wird ausgeblendet.

$("div p.click_to_hide_self").bind("click", function(){
   $(this).hide();
});

Beipiel: Element auf das geklickt wurde, ausblenden

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Beipiel: Element auf das geklickt wurde, blendet alle Elemente mit der gleichen Klasse aus.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Reagiere auf unterschiedliche Events

Blendet Element aus wenn man darauf klickt, oder mit der Maus darüber fährt. (Nützlich für Touchgeräte)


$("div.double-event").bind("click mouseover", function(){
	$(this).hide();
});

Beispiel: Blendet Element bei verschiedenen Events aus.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Content anhängen

Inhalte können an das Ende eines Elements angehängt werden. Hier wird ein Link an das Ende eines Paragraphen gesetzt.

Hier werden die Elemente innerhalb des Elements, an das sie angehängt sind, eingefügt.

$("p.append_element").append("<span>Fußnote</span>");

Beispiel: Inhalt am Ende des Elements einfügen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Content voranstellen

Genauso wie an das Ende können Inhalte auch an den Anfang eines Elements gesetzt werden. In diesem Fall wird eine Zwischenüberschrift an den Anfang eines Paragraphen gesetzt.

$("p.prepend-element").prepend("Zwischenüberschrift");

Beispiel: Inhalt an den Anfang des Elements einfügen

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Schleifen in jQuery

„each“ ist eine Methode um alle Elemente durchzugehen. Dies wird oft verwendet um nach bestimmten Elementen zu suchen, oder Attribute von Elementen zu manipulieren.

$("a.link").each(function(){
	$(this).attr("href", "javascript:void(0);");
});

Beispiel: Linkziel aller Links ändern

USER-XY
Google
jQuery
Lorem ipsum

Untersucht man die Links jetzt mit Firebug, so sieht es aus, als ob der Quelltext angepasst wäre.Sieht man sich allerdings den „echten“ Quelltext mit (StrG + u) an, so sieht man sofort, dass der Quelltext gleich geblieben ist.

CSS Eigenschaften auslesen und Manipulieren

Häufig will man bei einem bestimmten Event, die Schriftfarbe eines Elements ändern, sofern es diese nicht schon hat.

Auslesen der CSS Eigenschaft:

var elemColor = $("#css_element").css("color");

Manipulieren der CSS Eigenschaft:

$("#css_element").css({
	color: elemColor,
	fontSize: "20px"
});

Beispiel: CSS über jQuery verändern.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Elemente animieren

Um etwas mehr dynamik in die Seite zu bringen, kann man verschiedene Element auch animieren.

Über die „animate“-Funktion lassen sich allerdings nur Eigenschaften mit Zahlenwerten animieren. Farben kann man so nicht ändern.

$("div.animate").click(function(){
	$(this).animate({
		width : "600px",
		height : "200px"
	}, 1000);
});

Beispiel: Animiertes Element

Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.

Mauszeiger-Position ermitteln

Die aktuelle Position der Maus ermittelt man mit der Funktion mousemove().

$( "div" ).mousemove(function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
$( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
$( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
});

Beispiel: Mauszeiger Position

Move the mouse over the div.
 

The post jQuery-Tutorial: Einführung und Grundlagen appeared first on USER-XY.

]]>
http://www.user-xy.de/jquery-tutorial-einfuehrung-und-grundlagen/feed/ 4
WordPress Wartungsmodus schaltet nicht mehr ab http://www.user-xy.de/wordpress-wartungsmodus-schaltet-nicht-mehr-ab/ http://www.user-xy.de/wordpress-wartungsmodus-schaltet-nicht-mehr-ab/#comments Fri, 21 Mar 2014 13:09:13 +0000 http://www.user-xy.de/?p=1359 WordPress Wartungsmodus Meldung: Heute ist es passiert. Nach einem Plugin Update auf diesem Blog, schaltete sich der Wartungsmodus nicht mehr ab. Egal ob man auf das Front- oder Backend zugreifen will, erscheint die Fehlermeldung: Für kurze Zeit nicht verfügbar, um eine regelmäßige Instandhaltung durchzuführen. Prüfe in einer Minute erneut. Dies liegt daran, dass WordPress bei einem Update in den Wartungsmodus wechselt. Dabei ist es egal, …

The post WordPress Wartungsmodus schaltet nicht mehr ab appeared first on USER-XY.

]]>
WordPress Wartungsmodus Meldung:

Heute ist es passiert. Nach einem Plugin Update auf diesem Blog, schaltete sich der Wartungsmodus nicht mehr ab. Egal ob man auf das Front- oder Backend zugreifen will, erscheint die Fehlermeldung:

Für kurze Zeit nicht verfügbar, um eine regelmäßige Instandhaltung durchzuführen. Prüfe in einer Minute erneut.

Dies liegt daran, dass WordPress bei einem Update in den Wartungsmodus wechselt. Dabei ist es egal, ob es sich um ein Plugin oder Core-Update handelt. So sollen Fehler verhindert werden, die entstehen könnten, wenn sich User zum Zeitpunkt des Updates auf der Seite befinden und somit Funktionen ausgeführt werden, während die Datei gerade neu angelegt wird.

Ist das Update erfolgreich verlaufen, schaltet WordPress den Wartungsmodus normalerweise automatisch wieder ab. Wenn ein Fehler auftritt, wird das Update abgebrochen, die alte Version wird weiter verwendet, eine Fehlermeldung wird im Backend ausgegeben und auch hier wird der Wartungsmodus wieder abgeschaltet.

WordPress Wartungsmodus abschalten

Manchmal kann es allerdings passieren, dass ein Fehler auftritt, den WordPress nicht registriert, oder der Server während dieses Vorgangs nicht erreichbar ist. Aufgrund dessen wird der Wartungsmodus nicht abgeschalten und die Meldung bleibt bestehen.

Aber dieses Problem lässt sich ganz einfach lösen indem man den Wartungsmodus manuell abschaltet.

1. Hauptverzeichnis der WordPress Installation aufrufen.2. Die Datei „.maintenance“ suchen und löschen.

Manche FTP-Programme zeigen die Datei nicht an. Das gleiche gilt auch für „.htaccess“ oder „.htpasswd“ Dateien. Deshalb kann ich an dieser Stelle nur das Programm „Win-SCP“ empfehlen, wenn ihr unter Windows arbeitet.

Fazit

Der Fehler, dass sich WordPress im Wartungsmodus „aufhängt“ kam bei mir heute das erste Mal. Wie man hier sehen konnte, ist es nicht tragisch viel Aufwand diesen kleinen Fehler zu beheben, allerdings sollte man wissen, wie es geht.

Nachdem abschalten des Wartungsmodus habe ich mich wieder in mein WordPress-Backend eingeloggt. Dort habe ich das fehlgeschlafenge Update einfach nochmal ausgefährt. Keine weiteren Probleme.

The post WordPress Wartungsmodus schaltet nicht mehr ab appeared first on USER-XY.

]]>
http://www.user-xy.de/wordpress-wartungsmodus-schaltet-nicht-mehr-ab/feed/ 7
WordPress Blog-Netzwerk / Multi-Blog-Funktion aktivieren http://www.user-xy.de/wordpress-blog-netzwerk-multi-blog-funktion-aktivieren/ http://www.user-xy.de/wordpress-blog-netzwerk-multi-blog-funktion-aktivieren/#comments Wed, 05 Feb 2014 17:56:30 +0000 http://www.user-xy.de/?p=1112 Die Multi-Blog-Funktion von WordPress ist ein gutes Werkzeug, um schnell und mit minimaler Redundanz mehrsprachige Webseiten zu erstellen. Die Vorteile eines Multi-Blog-Netzwerks sind sowohl für Entwickler als auch für Redakteure zu spüren. WordPress Multi-Blog-Netzwerk aufsetzen Das WordPress Multisite Setup entspricht weitgehend der Installation eines Einzelbllogs. Der wesentliche Unterschied besteht in der Administration. Später, als „SuperAdmin“, ist man zuständig für die Verwaltung aller Blogs, die in …

The post WordPress Blog-Netzwerk / Multi-Blog-Funktion aktivieren appeared first on USER-XY.

]]>
Die Multi-Blog-Funktion von WordPress ist ein gutes Werkzeug, um schnell und mit minimaler Redundanz mehrsprachige Webseiten zu erstellen. Die Vorteile eines Multi-Blog-Netzwerks sind sowohl für Entwickler als auch für Redakteure zu spüren.

WordPress Multi-Blog-Netzwerk aufsetzen

Das WordPress Multisite Setup entspricht weitgehend der Installation eines Einzelbllogs. Der wesentliche Unterschied besteht in der Administration. Später, als „SuperAdmin“, ist man zuständig für die Verwaltung aller Blogs, die in dem aufgesetzten Netzwerk zur Verfügung stehen.

Start des WordPress Multisite Setup

Anfangs sind ein paar Dinge zu beachten, damit auch alles reibungslos funktioniert.
Man beginnt das Aufsetzen seines Multi-Blog-Systems am besten mit einem neuen leeren Projekt. Das spätere hinzufügen dieser Funktionalität zu einem bestehenden Blog kann einige Probleme, vorallem mit den Permalinks nach sich ziehen.

WordPress-Adresse und Blogadresse (Einstellungen/Allgemein) müssen übereinstimmen, ein lokaler Blog sollte mit einer numerischen IP laufen, nicht mit localhost. Also am besten einen V-Host für das neue Blognetzwerk erstellen.

Man sollte vor der Installation es Multi-Blog-System vorher mit dem Webhoster klären, ob man das überhaupt nutzen kann. Bei gemietetem Webspace ist das nicht immer der fall.
Will man später seine anderen Blogs über Subdomains laufen lassen, wäre das ein guter Zeitpunkt seinen Webhoster zu fragen ob und wie man Wildcard-Domains konfigurieren kann.

Nachdem jetzt alles klar ist, kann man mit der Installation des WordPress Multi-Blog-Systems beginnen:

Download des Intallationspakets

Als erstes, läd man sich das aktuelle Installationspaket von WordPress hier herunter.  Anschliesend wird das Paket in den Projektordner gelegt und entpackt.

Zwei Möglichkeiten das Blog-Netzwerk einzurichten

1. Man kann jetzt die Datei wp-config-sample.php in wp-config.php umbennen, dann darin die Datenbank-Zugangsdaten anpassen und die Zeile

<br />define('WP_ALLOW_MULTISITE', true);<br />

überhalb von

<br />/* That's all, stop editing! Happy blogging. */&lt;/code&gt;<br />

einfügen.
Anschließend noch die bearbeitete Datei „wp-config.php“ erneut auf den Server laden.

2. Man kann auch einfach die Installationsroutine von WordPress aufrufen und die einzelnen Schritte durchgehen. So hat man einen normalen Blog, aber das kann man ganz schnell ändern!;) Es wird noch kurz die Datei wp-config.php bearbeitet und schon ist man fertig.

Dazu fügt man, wie auch schon in der anderen Variante beschrieben, die Zeile

<br />define('WP_ALLOW_MULTISITE', true);<br />

überhalb von

<br />/* That's all, stop editing! Happy blogging. */<br />

ein und läd die bearbeitete Datei auf den Server hoch.

Der klick zur Aktivierung des Netzwerks

Als zweites loggt man sich in das Backend seines Blogs ein.
Dazu tippt man einfach in die Adresszeile des Browsers „http://www.deinedomain.de/wp-admin/“. Nach erfolgreichem Login öffnet an den Punkt „Werkzeuge“ im Menü auf der linken Seite. Hier findet man jetzt eine neue Option „Blog-Netzwerk“. Einmal darauf klicken bitte!;)

Installation des Blog-Netzwerks

Begonnen wird die Installation des Multi-Blog-Systems bei der Serveradresse, indem man gegebenfalls das „www“ der WordPress- und Blogadresse (unter Einstellungen/Allgemein) entfernt. Das hat den Vorteil, dass später Adressen und Links mit und ohne www-Part funktionieren.

Adressen der neuen Blogs im Netzwerk angeben

Im folgenden Abschnitt werden einmalig (und unwiderruflich!) festgelegt, wie die Adressen der zukünftigen „Unterblogs“ lauten werden: Unterverzeichnisse nach dem Schema deinedomain.de/unterblog funktionieren fast immer. Komplizierter wird es mit Subdomains nach dem Muster „unterblog.deinedomain.de“. Dafür braucht man weiteren Zugriff auf die Servereinstellungen und einen sogenannten Wildcard-DNS-Eintrag.
Jetzt folgt man weiter dem Installationsskript und gibt seinen Domainnamen und das bevorzugte Namensschema des geplanten Blog-Netzwerks, die Datenbankzugangsdaten und die Admin-Daten ein. Als nächstes vergibt man einen Namen für das Blog-Netzwerk und gibt noch eine korrekte E-Mailadresse an. Dann bestätigt man seine Eingaben mit „Jetzt installieren“.

Im Verzeichnis „wp-content“ auf dem Server sollte ein neues Unterverzeichnis namens blogs.dir angelegt werden, welches die Zugriffsrechte (755),  als beschreibbar hat. In diesem Ordner wird das hochgeladene Material der zukünftigen Sub-Blogs liegen.

Vor der Aktivierung der Multi-Blog-Funktion

Bevor man das Blog-Netzwerk aktiviert, sollte auf jeden Fall eine Sicherheitskopie der aktuellen wp-config.php  und der .htaccess-Datei angelegt werden. Anschließen kann man in den Orginaldateien die von WordPress generierten Code-Schnippel einfügen bzw. ersetzen. Danach müssen die geänderten Dateien nur wieder auf der Server geladen werden.

Anpassung der .htaccess Datei bei der Erstellung eines Blognetzwerks
Anpassung der .htaccess Datei bei der Erstellung eines Blognetzwerks

Fertigstellen des Blog-Netzwerks

Abschließen muss man sich nur noch aus- und  wieder einloggen damit man das neue Multi-Blog-Dashboard sehen kann. Jetzt ist man Super-Admin eines neuen Multi-Blog-Systems und hat Zugriff auf die Schaltfläche Blog-Netzwerk links oben. Im Admin-Bereich sieht man natürlich erst einen Blog, den eigenen.

Dashboard eines WordPress Blog-Netzwerks
Dashboard eines WordPress Blog-Netzwerks
Dashboard eines WordPress Multiblogs mit ausgeklappten Headermenü
Dashboard eines WordPress Multiblogs mit ausgeklappten Headermenü

Führung durch das Multi-Blog Backend

Oberhalb habt ihr ja schon einen Blick auf das Dashboard des WordPress Blog-Netzwerks bekommen.

Hier folgen nun die verschiedenen Menüpunkte die nach einer Installation vorhanden sind. Teilweise unterscheiden sie sich vom Funktionsumfang deutlich von der eines normalen WordPress. Hinter manchen verbirgt sich sogar eine komplett andere Funktionalität.

Seiten

Menüpunkt Seiten in einem WordPress Blog-Netzwerk
Menüpunkt Seiten in einem WordPress Blog-Netzwerk

Seiten im Dashboard eines WordPress Netzwerks sind keine Seiten die im Frontend als solche zu sehen sind. Hier werden die einzelnen Blogs die sich innerhalb dieses Netzwerkes befinden beschrieben.

Seitenübersicht in einem WordPress Blog-Netzwerk
Seitenübersicht in einem WordPress Blog-Netzwerk

Benutzer

Die Benutzerverwaltung des gesammten Netzwerkes befindet sich unter diesem Punkt.

Menüpunkt Seiten in einem WordPress Blog-Netzwerk
Menüpunkt Benutzer in einem WordPress Blog-Netzwerk

Klickt man auf den Punkt „Alle Benutzer“ kommt man auf die Übersichtsseite aller Benutzer. Diese werden in einer Tabelle dargestellt. Neben den Informationen wie Benutzername, Name, E-Mail und Registriert gibt es noch den Punkt Seiten. Inn diesem Punkt kann man erkennen auf welche Blogs der jeweilige Benutzer Zugriff hat.

Des weiteren gibt es noch den sogenannten Super-Admin Status. Das ist der Status für Blog-Netzwerk Administratoren. Ein normaler Admin hat nur die Macht über sein eigenes Blog und kann dort machen was er will.

Benutzerübersicht in einem WordPress Blog-Netzwerk
Bentuzerübersicht in einem WordPress Blog-Netzwerk

Themes

Unter “ Installierte Themes“ findet man eine Liste mit allen installierten Themes im Netzwerk.

Menüpunkt Themes in einem WordPress Blog-Netzwerk
Menüpunkt Themes in einem WordPress Blog-Netzwerk

Dort hat man dann auch die Möglichkeit ein Theme für einen einzelenen Blog oder für das gesammte Netzwerk zu bestimmen. Sonst hat man alle Funktionen wie in einer normalen WordPress-Installation auch. Man kann neue Themes hinzufügen, entfernen, deaktivieren und nach ihnen suchen, wenn die Liste an Themes mal zu lang werden sollte.

Theme-Übersichtsseite in einem WordPress Blog-Netzwerk
Theme-Übersichtsseite in einem WordPress Blog-Netzwerk

Die beiden anderen Unterpunkte die im Menü „Themes“ erscheinen sind ja selbsterklärend.
„Neu hinzufügen“ -> hier hat man die Möglichkeit ein neues Theme zu suchen und anschließend zu installieren.
„Editor“ -> Hier kann man über einen Editor das Theme bearbeiten. Es handelt sich hierbei um einen reinen Texteditor, ohne Syntaxhighlighting oder anderen spielereien. Deshalb rate ich von der Benutzung dieser Möglichkeit der Themebearbeitung stark ab. Die Übersicht ist einfach nicht gegeben und es passieren schnell Fehler, sollte man ein Anführungszeichen oder ein Semikolon vergessen.

Plugins

Als nächsten Punkt findet man die  Plugins im Menü.

Menüpunkt Plugins in einem WordPress Blog-Netzwerk
Menüpunkt Plugins in einem WordPress Blog-Netzwerk

Auf den ersten Blick sieht es so aus wie der ganz normale „Plugin“ Punkt, den man auch aus einer normalen WordPress Installation kennt. Klickt man jedoch auf dem Punkt „Installierte Plugins“, so sieht man gleich, dass man dort seine Plugins für das gesamte Netzwerk verwalten kann.

Plugin Übersichtsseite  in einem WordPress Blog-Netzwerk
Plugin Übersichtsseite in einem WordPress Blog-Netzwerk

So kann man die einzelnen Plugins für das gesamte Netzwerk freischalten oder nicht. In den einzelnen Blog Instanzen hat man dann die Möglichkeit die Plugins weiter zu konfigurieren oder auch wieder zu deaktivieren.

Plugins installieren

Das installieren eines neuen Plugins funktioniert so wie immer. Einfach unter dem Punkt „Plugins“ -> „Installieren“ auswählen, das gewünschte Plugin suchen und installieren.
Hier sollte man darauf achten, dass das Plugin auch mit einem Blognetzwerk kompatibel ist. Meist findet man die Informationen direkt auf der Beschreibungsseite des Plugins. Sollte das nicht der Fall sein, kann man den Autor kontaktieren oder es auf „Gut Glück“  installieren und sehen, ob alles funktioniert. Durch die eingebauten Sicherheitsmechanismen in WordPress sollte das Netzwerk nicht beschädigt werden, wenn ein Plugin inkompatibel ist.

Plugin Editor

Über den Punkt Editor im Plugin Menü hat man die Möglichkeit den Quellcode eines Plugins anzupassen. Hier ist äußerste Vorsicht geboten, da man das Plugin ohne weiteres Beschädigen, und so unbrauchbar machen kann. Auch sollte man sich im klaren darüber sein, dass nach einer erfolgreichen Bearbeitung und Anpassung des gewünschten Plugins keine Updates für dieses möglich sind, da sonst alle Änderungen wieder verloren gehen.

Hat man nun ein eigenes Plugin geschrieben, oder möchte trotzdem an einem bestehenden Plugin etwas anpassen, so findet man rechts oben ein Dropdown-Feld in dem man das gewünschte Plugin auswählen kann. Anschließend findet man auf der rechten Seite neben dem Editor eine Liste der Plugindateien. Klickt man auf eine von diesen, wird sie im Editor geöffnet und man hat die Möglichkeit diese zu bearbeiten.
Sollte das Bearbeiten deaktiviert sein, obwohl sie Administrator des Blogs oder des gesamten Netzwerks sind, liegt es höchst wahrscheinlich an den Schreibrechten auf dem Server.

Einstellungen

Ein weiterer und sehr wichtiger Punkt sind die Einstellungen. Hier nimmt man globale Einstellungen am Netzwerk vor. Außerdem findet man hier auch Einstellungen für diverse Plugins.

Menüpunkt Einstellungen in einem WordPress Multi-Blog
Menüpunkt Einstellungen in einem WordPress Multi-Blog

In der zweiten Ebene des Einstellungsmenüs befinden sich die Netzwerkeinstellungen, sowie der Punkt „Netzwerk-Einrichtung“. In meinem Fall auch noch das Konfigurationsmenü des Plugins „Multilingual Press“. Hier können noch weitere Punkte hinzukommen, wenn mehrere Plugins installiert wurden. Sollte ein Plugin weitere Einstellungsmöglichkeiten bereitstellen, aber keinen eigenen Navigationspunkt bieten, sollte man zuerst unter dem Punkt „Einstellungen“ nachsehen, ob dort ein weiterer Punkt hinzugefügt wurde.

Netzwerkeinstellungen

Die Netzwerkeinstellungen sind wiederum im sechs Bereiche gegliedert.

  • Grundeinstellungen
  • Registrierungseinstellungen
  • Einstellungen für neue Seiten
  • Dateiupload-Einstellungen
  • Spracheinstellungen
  • Menü Einstellungen
Einstellungen Übersichtsseite in einem WordPress Blog-Netzwerk
Einstellungen Übersichtsseite in einem WordPress Blog-Netzwerk

Grundeinstellungen

In den Grundeinstellungen kann man den Netzwerknamen, sowie die Website-Administrator-E-Mailadresse konfigurieren.
Die Website-Administrator-E-Mailadresse sollte immer hinterlegt sein, damit WordPress Benachrichtigungen und Hinweise verschicken kann.

Registrierungseinstellungen

Möchte man, dass sich andere Leute im Netzwerk bzw. in einem Blog registrieren können, sollte man diese Einstellungsmöglichkeiten genauer betrachten. Die Checkbox zum Senden von Registrierungsbenachrichtigungen sollte aktiviert sein. So hat man einen Überblick, wer sich registriert und kann ausschließen, dass ein intelligenter Bot nach dem Registrierungsvorgang die Seite zuspamt.

Hat man ein umfangreiches Blognetzwerk, will man vielleicht nicht selbst alle neuen Benutzer hinzufügen. Deshalb gibt es die Möglichkeit den Administratoren einer bestimmten Seite das Recht zu geben, selbst neue Benutzer anzulegen.

Einstellungen für neue Seiten

Legt man eine neue Seite im Netzwerk an, passiert ganz viel. Das kennt jeder, der schon mal eine WordPress-Installation durchgeführt hat. Man bekommt eine E-Mail über das erfolgreiche Erstellen der Seite. Außerdem Benutzername und Passwort. Des weiteren hat man nach der Installation gleich eine erste Seite, einen Artikel und einen ersten Kommentar. Diese sind automatisch von WordPress generiert. Auf dieser Seite hat man die Möglichkeit selbst zu entscheiden was auf den generierten Elementen stehen soll. Zudem kann man auch noch den Autor des ersten Kommentars, sowie die URL angeben. Statt dem von WordPress generierten Text kann man also Firmen- oder Themenbezogene Inhalte ausspielen.

Dateiupload-Einstellungen

Scrollt man ein stück weiter, findet man die Einstellungen zum Dateiupload. Unter anderem kann man dort den Speicherplatz für eine Seite einstellen. Dies ist vor allem dann hilfreich und sinnvoll, wenn man einen Webspace mit begrenztem Speicherplatz hat. Auch kann man so die Ladegeschwindigkeit einer Seite unter Kontrolle halten.

Die Verwaltung der erlaubten Dateitypen bei einem Upload finde ich auch sehr gut, da man so sicher sein kann, dass auch nur Dateien hochgeladen werden, die auch im Web angezeigt und verwendet werden können. Sollte dieser Filter fehlen, könnte jemand auf die Idee kommen eine „.psd“ Datei in die Seite integrieren zu wollen.

Des weiteren kann man hier auch die maximale Upload-Größe einer Datei festlegen. Dies ist in meinen Augen auch sehr hilfreich um den Speicherplatz nicht mit unnötig großen Dateien vollzumüllen und um das Laden eines großen Bildes auf der Seite zu ermöglichen, ohne dass ein „Maximum execution time“ Fehler kommt, da das File nicht innerhalb einer bestimmten Zeit geladen werden konnte.

Spracheinstellungen

Bei den Spracheinstellungen kann man die Standardsprache einstellen.

Menü Einstellungen

Hier kann man über eine Checkbox die Administrations-Menüs für einzelne Plugins aktivieren bzw. deaktivieren.

Netzwerk-Einrichtung

Der zweite Punkt unter Einstellungen in der Navigation ist der Punkt „Netzwerk-Einrichtung“. Diese Seite wird man nur initial bei der Einrichtung des Netzwerks benötigen. Dort findet man die benötigten Zeilen PHP-Code, die man in die Datei „wp-config.php“ eintragen muss, um das Blognetzwerk zu aktivieren.

Außerdem findet man dort den Inhalt für die Erweiterung der .htaccess Datei. Diesen Inhalt muss man auch nur kopieren und in der .htaccess Datei den alten Inhalt durch den Aktuellen ersetzen.

Updates

In einer einfachen WordPress Installation findet man die neuen Updates unter dem Punkt „Dashboard -> Aktualisierungen“. Dort kann man dann die gewünschten Plugins und Themes, die man updaten möchte, auswählen. Auch kann man dort den gesamten WordPress-Core updaten.

In einer Multi-Blog-Installation hat man einen extra Punkt „Updates“.

Menüpunkt Update in einem WordPress Multi-Blog
Menüpunkt Updates in einem WordPress Multi-Blog

Dieser wiederum hat zwei Unterpunkte, „Verfügbare Updates“ und „Netzwerk aktualisieren“.
Unter „Vefügbare Updates“ findet man, wie in einer einfachen WordPress Intallation auch, die gewünschten Plugins und Themes, die man updaten möchte.
Unter „Netzwerk aktualisieren“ findet man Updates, wie z.B. ein Datenbank Update, die das gesamte Netzwerk, also alle Bloginstanzen betreffen.

 

Fazit

Im Laufe der Zeit werden sicherlich noch weitere Artikel von mir zum Thema WordPress Blog-Netzwerk / Multi-Blog-Funktion veröffentlicht. Ich denke, dass der Einsatz eines Blognetzwerks viel Sinn macht, da man die einzelnen Blogs so viel einfacher und komfortabler verwalten kann.
Plugins für Blog-Netzwerke wird es in Zukunft wohl immer mehr geben, doch momentan muss man oft einfach ausprobieren, welches Plugin auch innerhalb eines Netzwerks funktioniert und welches nicht. Außnahmen gibt es allerdings auch. Manche Entwickler schreiben extra in die Plugin Beschreibung ob dieses auch in einer Multisite-Installation verwendet werden kann.

Habt ihr Erfahrungen mit WordPress Mulitsites? Dann hinterlasst doch ein paar Informationen hierzu in den Kommentaren – natürlich darf auch auf entsprechende Veröffentlichungen in anderen Blogs hingewiesen werden!;)

The post WordPress Blog-Netzwerk / Multi-Blog-Funktion aktivieren appeared first on USER-XY.

]]>
http://www.user-xy.de/wordpress-blog-netzwerk-multi-blog-funktion-aktivieren/feed/ 3
Responsive Design mit CSS und jQuery http://www.user-xy.de/responsive-design-mit-css-und-jquery/ http://www.user-xy.de/responsive-design-mit-css-und-jquery/#comments Mon, 18 Nov 2013 11:28:57 +0000 http://www.mj.de/?p=268 Frameworks für responsive Webdesign Responsive Design ist seit monaten Gesprächsthema Nummer 1 in der Welt des Webdesigns. Immer wieder hört man von Twitters Bootstrap Framework oder einer seiner Alternativen wie Flat UI. Will man jedoch nicht auf den responsive Design Zug aufspringen, oder braucht eine individuellere, kleinere Lösung und kein ganzes Framework, der sollte sich die folgenden paar Zeilen Code einfach mal ansehen. Auch abseits …

The post Responsive Design mit CSS und jQuery appeared first on USER-XY.

]]>
Frameworks für responsive Webdesign

Responsive Design ist seit monaten Gesprächsthema Nummer 1 in der Welt des Webdesigns. Immer wieder hört man von Twitters Bootstrap Framework oder einer seiner Alternativen wie Flat UI. Will man jedoch nicht auf den responsive Design Zug aufspringen, oder braucht eine individuellere, kleinere Lösung und kein ganzes Framework, der sollte sich die folgenden paar Zeilen Code einfach mal ansehen.
Auch abseits von Browser-Hacks ist es jetzt möglich, ein respsponsive Design umzusetzten und so die Darstellung der Contentelemente auf den verschiedenen Endgeräten wie dem iPhone, iPad, und anderen mobilen Geräten anzupassen.

Klar ist, dass man eine Lösun­gen für das responsive Design einer Website am Anfang pla­nen muss. Einfach mal anfangen und Breakpoints definieren wo es gerade gut aussieht ist keine Lösung. Auch das dauernde erweitern und überschreieben von Elementen und Klassen endet sehr schnell im Chaos.

Responsive Design von Anfang an

Will man eine Seite von Grund auf responsive Gestalten und das auch in der Umsetzung beibehalten, ist die Planung des Seitenaufbaus, des Quellcodes und der Stylesheets das A und O.

Die Umsetzung von Full-Responsive-Design-Vorlagen erfordert sehr viel Zeit in der Planung, der Umsetzung und natürlich auch beim Testen der Seite. Deshalb nehme ich bisher bei kleineren Projekten eher Abstand von voll-fle­xi­blen Lay­outs. Bis­her bedeu­tete dies alle Ele­mente mit rela­ti­ven Grö­ßen zu bema­ßen und dann alles hübsch schrump­fen und wach­sen zu las­sen.
Damit ein Grund­ras­ter ein­zu­hal­ten, ist sehr schwierig. Vor allem wenn auch der Kunde eine pixelgenaue Umsetzung einer Seite haben möchte, die womöglich auch noch von einer anderen Agentur gelayoutet wurde.
Mein aktueller Ansatz ist das Zuweisen bzw. Entfernen von CSS-Klassen auf den jeweils zu ver­än­dern­den Elementen.

Responsive Design Breakpoints mit jQuery

Die Umsetzung ist ganz einfach. jQuery über­prüft die Fens­ter­größe, weist je nach Ergeb­nis eine ent­spre­chende CSS-Klasse zu und wech­selt diese, sobald sich die Fenstergröße ändert und einen von mir definierten Breakpoint überschreitet. Alles was man braucht, steckt in diesen Zeilen.

In mei­nem Bei­spiel bekommt das „body“-Tag je nach Auf­lö­sung eine unter­schied­li­che zusätz­li­che Klasse. Ausschlaggebend ist hier die Breite des Brow­ser­fens­ters. Bei weni­ger als 1024px wird die CSS-Klasse “less1024” zuge­wie­sen und die Klasse “over1024” ent­fernt. Sind die 1024 Pixel vor­han­den, wer­den die Klas­sen aus­ge­tauscht.

Beispiel:

$(document).ready(function() {
    elementResize();

    $(window).bind("resize", function(){
        elementResize();
    });
});

function elementResize() {
    var browserWidth = $(window).width();
    if ((browserWidth) < "1024"){
        $("body").addClass("less1024");
        $("body").removeClass("over1024");
    } else {
        $("body").addClass("over1024");
        $("body").removeClass("less1024");
    }
}

Worin liegt der Unter­schied zwi­schen der Ver­wen­dung rela­ti­ver Grö­ßen beim responsive Design und die­ser Lösung? Man behält hier die volle Kon­trolle über jeden ein­zel­nen Pixel, aller­dings auf Kos­ten von einigen zusätzlichen CSS-Codezeilen. Hier entstehen zwei Varianten, die beide komplett gestylt werden können / müssen.

Nun man muss natürlich nicht wirklich auf relative Größen verzichten. Man kann diese jetzt ganz gut und einfach an den Breakpoints mit der festen Breite und den gesetzten Klassen ausrichten.

Responsive Design und CSS Media Queries

Es ist ganz klar, dass man diese Lösung nicht als Allheilmittel bezeichnen kann, jedoch bietet es mehr Flexibilität beim Umsetzen einer responsive Desin Vorlage.
Einige werden sich jetzt mit sicherheit Fragen, wieso man nicht einfach die tollen neuen CSS Media Queries nehmen sollte.

Genau an diesem Punkt muss man sich entscheiden, ob man CSS zu stylen verwenden will, oder ob an einer Styling-Sprache die ein Stück Programmlogik abgeben möchte.

Javascript und in diesem Fall jQuery bietet den Vorteil, den Breakpoint, wann ein anderes Layout erscheinen soll, an einer globalen Stelle zu anzupassen. Auch kann man mitten Projekt einfach mal den Breakpoint ändern oder weitere Klassen hinzufügen, wegnehmen oder die Logik der JQuery-Funktion erweitern, ohne dass dafür oft viele Stellen im CSS angepasst weren müssen.

Eine ganz entscheidende Sache allerdings, die gegen den Einsatz von CSS Media Queries im Hinblick auf die Umsetzung eines responsive Designs, ist die Unterstützung der älteren Browser, wie der IE7. Ja, leider muss man sich heute immer noch mit diesem Browser herumschlagen, auch wenn wir längst die Nase voll haben.
Werden die Klassen über JavaScript geändert, funktioniert eine Seite mit responsive Design auch auf den ältesten Kisten!;)

The post Responsive Design mit CSS und jQuery appeared first on USER-XY.

]]>
http://www.user-xy.de/responsive-design-mit-css-und-jquery/feed/ 5