Daniele De Rosa – Webdesigner https://www.danielederosa.de Fri, 22 Dec 2017 09:00:05 +0000 de-DE hourly 1 https://wordpress.org/?v=4.9.3 Eigene Apps erstellen mit Ionic – Projekt anlegen https://www.danielederosa.de/eigene-apps-erstellen-mit-ionic-projekt-anlegen/ https://www.danielederosa.de/eigene-apps-erstellen-mit-ionic-projekt-anlegen/#respond Sun, 17 Dec 2017 20:24:54 +0000 https://www.danielederosa.de/?p=2955 In dieser Anleitung möchte ich Dir zeigen, wie Du mit Ionic Dein eigenes App-Projekt erstellst. Ich selbst bin mittlerweile ein großer Ionic-Fan!

Was ist Ionic?

Ionic ist ein Frontend-Framework, das es Dir ermöglicht, mobile Applikationen anhand einer einzigen Code-Basis für mehrere mobile Plattformen wie beispielsweise iOS & Android zu erstellen. Entwickelt wird vor allem in Javascript (AngularJS), HTML und CSS. Grundkenntnisse sollten hier also vorhanden sein.

Ein Ionic-Projekt starten

Um ein neues Ionic-Projekt zu starten, müssen zuvor ein paar Abhängigkeiten installiert werden, in dem Fall Cordova und die Ionic CLI. Mit folgendem Befehl im Terminal kannst Du beide global installieren:

npm install -g ionic cordova

Super! Jetzt kann es losgehen! Bei der Erstellung eines neuen Projektes haben wir die Möglichkeit, ein beliebiges Starter-Template auszuwählen. Hier macht es Sinn, sich vorher Gedanken über die Struktur der App zu machen. Ionic schenkt uns folgende Möglichkeiten:

Ich möchte in diesem Fall eine App mit Tabs als Basis wählen. Also gebe ich folgenden Befehl im Terminal ein:

ionic start Meine-Neue-App tabs

Meine-Neue-App definiert den Namen des Ordners. Dieser ist natürlich frei wählbar. tabs ist die eben angeführte Layout-Option. Wenn Du keine Option mit angibst, wird automatisch das tabs-Layout gewählt.

Sollte nun nach erfolgreichem Anlegen die Meldung Would you like to integrate your new app with Cordova to target native iOS and Android? erscheinen, kann gerne mit y bestätigt werden.

Projekt im Browser anschauen

Super! Du hast erfolgreich Deine erste Ionic-App erstellt! Um Dir das Ergebnis im Browser anzuschauen, wechsel im Terminal zunächst auf den neu erstellten Ordner Meine-Neue-App:

cd Meine-Neue-App

Mit folgendem Befehl kannst Du Deine App nun im Browser simulieren:

ionic serve

Nachdem der lokale Server erfolgreich gestartet wurde, sollte in Deinem Browser nun folgendes Fenster erscheinen:

Glückwunsch, Du hast gerade Dein erstes Ionic-Projekt gestartet! Die Entwicklung kann beginnen! 🙂 Weitere Ionic-Tutorials werden folgen, unter anderem plane ich die Schritt für Schritt-Umsetzung einer kompletten App in Videoform.

Ich wünsche Dir viel Spaß mit Ionic!

]]>
https://www.danielederosa.de/eigene-apps-erstellen-mit-ionic-projekt-anlegen/feed/ 0
Elemente mit CSS vertikal zentrieren https://www.danielederosa.de/elemente-mit-css-vertikal-zentrieren/ https://www.danielederosa.de/elemente-mit-css-vertikal-zentrieren/#comments Thu, 09 Feb 2017 10:22:04 +0000 http://www.danielederosa.de/?p=2925 Das horizontale Zentrieren von Texten oder anderen Inhalten sollte für die meisten kein Problem sein. Anders sieht es bei der vertikalen Zentrierung aus, bei der einige sicherlich schon unzählige Nerven verloren haben. 🙂 In diesem Artikel stelle ich Dir zwei Möglichkeiten vor, die es Dir ermöglichen, Elemente mit recht wenig Code auch vertikal zu zentrieren.

Wichtig: Um Elemente mit diesen Methoden vertikal zentrieren zu können, muss das zu zentrierende Element das einzige direkte Kind-Element eines Eltern-Elements sein. Es darf keine weiteren Geschwister-Elemente enthalten.

Möglichkeit 1. display: table

Diese Möglichkeit verfügt über einen sehr guten Browser-Support und ist nicht mit Tabellen zu verwechseln, mit denen man damals ganze Layouts entwickelt hat. Hier geht es um die „display:table“-Eigenschaft von CSS. Du kannst also aufatmen. 😀

Beispiel für die HTML-Struktur:

<!-- Funktioniert -->
<div class="eltern-element">
	<div class="kind-element"></div>
</div>

<!-- Funktioniert -->
<div class="eltern-element">
	<div class="kind-element">
		<p>Der vertikal zentrierte Text</p>
	</div>
</div>

<!-- Funktioniert NICHT -->
<div class="eltern-element">
	<div class="kind-element"></div>
	<div class="weiteres-kind-element"></div>
</div>

Nun folgt der entsprechende CSS-Code. Deinem Eltern-Element gibst Du „display: table“ mit, damit es sich wie eine Tabelle in HTML verhält. Dabei zu beachten ist, dass, falls es sich bei diesem Element um ein Block-Element handelt, die Breite von 100% nochmal manuell hinzugefügt werden muss. (width: 100%;)

Das Kind-Element erhält die Werte display: table-cell und vertical-align: middle. Durch den ersten bewirkst Du, dass sich das Kind-Element wie eine Tabellenzeile in HTML verhält, durch den zweiten Wert wird die entsprechende Zeile vertikal zentriert, relativ zum Eltern-Element.

Beispiel für die CSS-Anweisungen

.eltern-element {
	display: table;
	width: 100%; /* Falls es sich um ein Block-Element handelt */
	height: 300px; /* Im besten Fall hat das Eltern-Element bereits eine Höhe, diese Anweisung kann dann ignoriert werden */
}
.kind-element {
	display: table-cell;
	vertical-align: middle;
}

Das war´s schon. Nun sollte der Inhalt des Elements mit der Klasse kind-element vertikal zentriert dargestellt werden. Schauen wir uns nun die zweite Möglichkeit an.

Möglichkeit 2. display: flex

Diese Möglichkeit mag ich ganz besonders, da man hier nur dem Eltern-Element Anweisungen mitgeben muss. Der Nachteil liegt im Browser-Support. Ältere Browser unterstützen das Flexbox-Modell leider nicht, daher prüf bitte, bevor Du Dich für diese Möglichkeit entscheidest, die Voraussetzungen Deines Projektes.

Mit der Angabe display: flex wird das Flexbox-Modell innerhalb eines Elements aktiviert. Soll der Inhalt dieses Elements vertikal zentriert werden, verwendest Du zusätzlich align-items: center. Für die horizontale Zentrierung ist justify-content: center vorgesehen. Die HTML-Struktur bleibt:

Beispiel für die HTML-Struktur:

<!-- Funktioniert -->
<div class="eltern-element">
	<div class="kind-element"></div>
</div>

<!-- Funktioniert -->
<div class="eltern-element">
	<div class="kind-element">
		<p>Der vertikal zentrierte Text</p>
	</div>
</div>

<!-- Funktioniert NICHT -->
<div class="eltern-element">
	<div class="kind-element"></div>
	<div class="weiteres-kind-element"></div>
</div>

Beispiel für die CSS-Anweisungen

.eltern-element {
	display: flex;
	align-items: center; /* Vertikale Zentrierung */
	justify-content: center; /* Horizontale Zentrierung */
}

Gut, damit hätten wir die Inhalte vertikal zentriert. Viel Spaß beim Ausprobieren!

]]>
https://www.danielederosa.de/elemente-mit-css-vertikal-zentrieren/feed/ 4
Welche Vorteile bietet Component CSS? https://www.danielederosa.de/welche-vorteile-bietet-component-css/ https://www.danielederosa.de/welche-vorteile-bietet-component-css/#respond Wed, 03 Aug 2016 13:17:04 +0000 http://www.danielederosa.de/?p=2906 Was ist Component CSS?

Viele Webseiten und Web-Applikationen bestehen aus einer Vielzahl an unterschiedlichen CSS-Dateien, welche in ihrer Menge oftmals nur schwer zu überblicken sind. Vor allem die Wartung und Erweiterung der vielen Komponenten ist dann entsprechend aufwendig und unübersichtlich. Hinzu kommt das beispielsweise mehrere Entwickler simultan an einem Webprojekt arbeiten und individuelle Eigenheiten eines einzelnen Programmierers für den anderen Mitarbeitet verwirrend und durcheinander erscheinen. Hier kann die Component CSS Architektur oder auch kurz CCSS eingesetzt werden, mit deren Hilfe die CSS-Struktur einer Internetseite oder einer Web-Anwendung dauerhaft verbessert wird.

Die Component CSS Architektur orientiert sich am bereits bestehenden und etablierten Konzept der Web-Components, bei denen wiederverwendbare Widgets oder andere Komponenten mithilfe der gängigen Programmiersprache HTML entwickelt werden. Die Komponenten sind dabei einzeln gekapselt und verfügen so über die Fähigkeit mit anderen Systemen kompatibel zu arbeiten. Durch die Kapselung können zudem Komponenten jederzeit geändert werden und zwar ohne dass andere Elemente im System davon betroffen sind. Diese technische Ausrichtung der komponentenbasierten Webentwicklung soll nun auf die Stylesheet-Sprache angewendet werden, um die Programmierarbeit dauerhaft zu erleichtern. Hierfür kommen verschiedene Techniken, Prinzipien und Elemente zum Einsatz.

Nach welchen Prinzipien funktioniert Component CSS?

Der Einsatz von Component CSS verfolgt verschiedene Prinzipien, welche mehrere Vorteile und Erleichterungen in der Programmierarbeit mit sich bringt. Zum einen gilt der bereits genannte komponentenbasierte Ansatz, welcher kleine und voneinander unabhängige Komponenten ermöglicht, die dann wiederum an unterschiedlichen Stellen und sogar in anderen Projekten zum Einsatz kommen können. Das Prinzip weist dabei eine enge Verbindung mit den Web-Components und der HTML-Struktur.

Ein weiteres Prinzip verfolgt die vollständige Isolierung Komponenten und eine Aufhebung der Abhängigkeiten der einzelnen Elemente untereinander. Im Idealfall konzentrieren sich diese dann nur auf einen bestimmten Teilausschnitt im jeweiligen User-Interface. Denn die Verzahnung mit anderen Komponenten würde dann die Verwaltung der CSS-Dateien wieder verkomplizieren und erschweren.

Des Weiteren zielt die Component CSS Architektur darauf ab, so wenig Stylesheets wie überhaupt nötig anpassen zu müssen, sondern die visuelle Darstellung im HTML-Code zu konfigurieren. Um nun einen CSS-Code zu formulieren, welcher sich über mehrere Unterseiten hinweg einheitlich verhält, sollten komplizierte Selektoren oder generische Klassennamen vermieden werden.
Trotz der einfachen Wartungs- und Erweiterungsmöglichkeiten sollte eine detaillierte und lückenfreie Dokumentation zur Verfügung stehen, welche dazu dienen die Funktionen der eingesetzten Komponenten schnell deutlich zu machen.

Welche Elemente kommen bei Component CSS zum Einsatz?

Die Strukturierung der jeweiligen CSS-, SASS- oder auch Less-Dateien erfolgt anhand der SMASS-Architektur. Diese wurde von Jonathan Snook entwickelt und umfasst insgesamt fünf Kategorien mit unterschiedlicher Beschaffenheit. Diese können anhand ihrer Eigenschaften dann den entsprechenden CSS-Dateien zugeordnet werden:

Base Rules:    
Resets und Styling von Elementen wie Links und Input-Felder

Layout Rules:    
Beschreibung der Layout-Abschnitte (Sections) welche Module enthalten

Module Rules:  
Wiederverwendbare und modulare Teile des Designs

State Rules:    
Beschreibung der Module und deren Aussehen im bestimmten Zustand

Theme Rules:    
Beschreiben ebenfalls Module und Layouts; entsprechen den State Rules

Ausgezeichnet werden die einzelnen Klassen nach dem Block-Element-Modifier-Muster (BEM), welches von den Entwicklern der russischen Suchmaschine Yandex programmiert wurde. Bei Components CSS wird das Muster nun in vereinfachter Form (Simplified BEM) eingesetzt und verwendet. Beispielsweise wird für alle Base-Klassen das Präfix u- verwendet. Sämtliche systemweiten Animationen und Bilder werden zudem mit dem Klassenpräfix img- oder animate- definiert. Kommen nun einzelne Komponenten zum Einsatz wird das BEM-Muster mit ComponentName- elementName-modiefierName verwendet, wobei ein Komponentenname immer mit einem Großbuchstaben beginnen muss. Als weitere Voraussetzung dürfen Komponentennamen nicht mit Bindestrichen versehen werden, da diese für die Unterscheidung von Elementen, Blöcken und Modiefer verantwortlich sind.

Es lohnt sich also SASS zu verwenden, um die Entwicklung ganzheitlich zu vereinfachen. Die Architektur kann darüber hinaus auch weiterhin mit LESS oder dem normalen CSS realisiert werden.

Wie sind die Strukturen im Component CSS beschaffen?

Ganz allgemein wird die Strukturgrundlage von CCSS nach den SMACSS-Vorgaben bereitgestellt. In der nun folgenden Beispielstruktur befinden sich die css, base, components und ext Ordner sowie diverse CSS- und SCSS-Dateien.

Der Ordner ext nimmt dabei nun zunächst alle externen Bibliotheken auf. Dieser Ordner ist demnach unabhängig von allen anderen Ordnern und kann so projektabhängige Dateien durch Tools wie Bower oder Gunt aktualisieren, ohne das etwa andere Elemente davon beeinflusst oder verändert werden. Weiterhin befinden sich im Ordner css nun alle Projektdaten für die einzelnen Komponenten. Im Ordner base wiederum lagern sämtliche allgemeine Dateien, die in der Entwicklung dann übergreifend für alle Seiten bereitgestellt werden müssen. An dieser Stelle wird global das Aussehen der Links bestimmt oder auch resets definiert. Im component Ordner erfolgt nun die Festlegung der einzeln eingesetzten Komponenten, die beispielsweise bei Suchformularen oder der 404-Seite zum Einsatz kommen. Darüber hinaus können im theme Verzeichnis unterschiedliche Gestaltungs- und Farbschemen für eine Anwendung eingebettet werden. Über den Befehl @import- werden dann alle Anweisungen, in diesem Fall die SCSS-Dateien, zusammengefasst. Nach dem Durchlauf des entsprechenden Grunt-Tasks landen alle CSS-Anweisungen dann abschließend in der main.css oder in der image.css.

Component CSS_2.docx

Welche Vorteile bietet Component CSS?

Wie Eingang bereits erwähnt, besteht der entscheidende Mehrwert von Component CSS in der Übersichtlichkeit, welche mithilfe der Architektur auch in großen Teams und Projektentwicklungen gewährleistet ist. Jeder Programmierer kann durch die angewendeten Prinzipien die Strukturen schneller durchschauen und sich auch in fremde Ausführungen besser einarbeiten. So können anhand der klaren Ausrichtung und mithilfe eines gut dokumentierten Codes Probleme aus der Vergangenheit ausgeräumt oder zumindest vereinfacht werden. Änderungen an einem einzelnen Element können außerdem durchgeführt werden, ohne dass andere Teile eine ungewollte Beeinflussung erfahren. Unerwünschte oder auch unbeabsichtigte Fehler können zudem durch die Modulstrukturierung vermieden werden. Zusätzlich können Komponenten durch die Modularität seiten- und projektübergreifend zum Einsatz kommen. So vereint Component CSS mehrere Eigenschaften und Prinzipien, welche die Programmierarbeit zukünftig vereinfachen und dementsprechend auch genutzt werden sollten.

Weiterführende Links und Informationen:

https://github.com/sathify/CCSS
https://smacss.com/
https://en.bem.info/


Ein Artikel von Eric Heydrisch

Damit Webseiten stabil laufen und jeder Klick der Nutzer ans Ziel gelangt, bedarf es professioneller Programmierung. Bei kartinka kümmert sich Eric Heydrich mit seinem ganzen Know-How um eine fehlerfreie Webprogrammierung.

Programmierstandards wie CSS, CSS3, HTML (XHTML, HTML5), oder PHP sind für Eric Heydrich keine Fremdwörter und wenn es so richtig komplex wird, läuft Eric Heydrich zur Hochform auf.

]]>
https://www.danielederosa.de/welche-vorteile-bietet-component-css/feed/ 0
WordPress-Begriffe für Newbies https://www.danielederosa.de/wordpress-begriffe-fuer-newbies/ https://www.danielederosa.de/wordpress-begriffe-fuer-newbies/#comments Thu, 17 Mar 2016 16:29:00 +0000 http://www.danielederosa.de/?p=2867 WordPress ist eines der beliebtesten Content-Management-Systeme (CMS) im Online-Geschäft. Mehr als 22% der ganz großen Webseiten weltweit werden von WordPress betrieben. Aber auch für Anfänger ist das System sehr attraktiv, weil WordPress-CMS-Webseiten eine gewisse Einfachheit verleiht. Es nimmt nicht viel Zeit in Anspruch, das System zu installieren. Außerdem lässt es sich mit Themes oder Plugins erweitern und anpassen. Doch durch Erfahrungsmangel bei den Newbies treten Umstände auf, die eine normale Funktionalität des CMS erschweren können. Daher ist es wichtig, sich von vornherein mit wichtigsten WordPress-Begriffen auseinanderzusetzen, um mögliche Hindernisse zu umgehen. Das hilft dann später, nützliche Informationen auf Blogs oder Foren zu verstehen und herauszusuchen, und sie dann auch effektiv anzuwenden. Damit Newbies in der WordPress-Welt erfolgreich starten können, wird in diesem Beitrag das grundlegende WordPress-Lexikon vorgestellt.
Gastartikel (Danile De Rosa) WordPress-Begriffe für Newbies.docx

Quelle: http://www.digitaldownloads.io/

1. Backend / Frontend

Ist man ein WordPress-Einsteiger, muss man ganz genau den Unterschied zwischen Backend und Frontend verstehen. Das Backend, auch Administrationsbereich genannt, stellt die Nutzeroberfläche von WordPress dar. Als Admin haben nur Sie mit Ihrem Login und Password Zugang zum Backend und Zugriff auf Ihre Seite. Hier können Sie Beiträge posten, Plugins installieren und Updates vornehmen. Ihre Leser sehen diese Nutzeroberfläche nicht. Das Frontend ist die eigentliche Webseite. Ihre Leser können sie über Internet-Browser finden und darauf surfen. Deshalb ist es sehr wichtig, dass das Frontend korrekt und fehlerfrei aufgebaut ist.

Gastartikel (Danile De Rosa) WordPress-Begriffe für Newbies.docx

Quelle: http://www.dtelepathy.com/

2. Backup

Das Backup garantiert Sicherheit für Ihre Seite. Anders gesagt ist das Backup eine Sicherungskopie Ihrer Daten von Computern, Laptops, Tablets oder Smartphones. Ihre Daten werden auf einem externen Datenträger gespeichert. Als Datenträger können z.B eine PC-Festplatte oder ein USB-Stick dienen, man kann ein Backup aber auch online machen. Die regelmäßige Sicherung aller Daten ist extrem wichtig: ob von Handys, Festplatten, E-Mail-Accounts oder sonstigen Geräten. Heute gibt es hunderte kostenfreie und kostenpflichtige Backup-Plugins, die ein gemeinsames Ziel haben – Ihre Webseite von Angriffen aus dem Netz zu schützen.

Gastartikel (Danile De Rosa) WordPress-Begriffe für Newbies.docx

Quelle: http://b-hive.expetec.com/

3. Blog

Im allgemeinen lässt sich WordPress als ein Blogging-System definieren. Grundsätzlich zählt Blogging zu den aktuellsten Trends in der Webwelt, und jede große Firma hat einen Blog. Aber was ist überhaupt ein Blog? Ein Blog wird meistens in Form eines Online-Tagebuches dargestellt, wo man regelmäßig Blog-Beiträge oder Blog-Posts einstellen kann. Im Vergleich zu einer Webseite, wo sich die Seiten selten oder fast nie verändern lassen, ermöglicht es ein Blog, Ihren Inhalt dynamisch und lebendig zu gestalten. Natürlich wird Ihr Blog dadurch einzigartig und spannend und bringt Ihren Lesern viel Spaß!

Außerdem gibt es so genannte professionelle Blogs, die meistens von Unternehmen betrieben werden, um deren Kunden regelmäßig über die neusten Produkte oder Dienste zu informieren. Kommentare – als eine zusätzliche Funktion in Blogs – erlauben es den Kunden, ihre Meinungen zu tauschen oder aktuelle Themen zu besprechen.

Gastartikel (Danile De Rosa) WordPress-Begriffe für Newbies.docx

Quelle: http://akshatrathi.com/

4. Dashboard

Die Zentrale der eigenen Website in WordPress nennt sich das Dashboard. Die Hauptfunktion des Dashboards ist es, Ihnen eine schnelle Übersicht über Ihre Seite zu verschaffen. Hier haben Sie unmittelbaren Zugriff auf Nachrichten und können Ihre Artikelentwürfe sehen. Hier sehen Sie, wer auf Ihre Seite verlinkt hat und ob der Inhalt gut ankommt. Außerdem lassen sich vom Dashboard aus Kommentare checken und moderieren. Diese Startseite verschafft Ihnen eine Art Vogelperspektive, von der aus man die einzelnen Elemente seiner Seite einsteuern kann.

5. Plugins

Plugins stellen ein zusätzliches, ganz wichtiges Element von WordPress dar. Plugins erlauben es, die grundsätzlichen Funktionen von WordPress mühelos zu erweitern. Außerdem existieren Tausende Möglichkeiten, um die WordPress-Webseite mit erweiterten Funktionen auszurüsten. Es gibt unzählige kostenfreie wie auch kostenpflichtige Plugins, mit deren Hilfe sich kleine und große Änderungen in der Webseite umsetzen lassen: von Social Media-Buttons und Spamschutz-Kontrolle bis zu kompletter Geschäfts-Funktion und Mehrsprachigkeit. Mit Hilfe von Plugins lässt sich WordPress flexibler und eindrucksvoller nutzen. Man darf aber nicht vergessen, dass Plugins nur auf einer Webseite mit Selbst-Hosting möglich sind. Bei den Webseiten auf WordPres.com können keine Plugins installiert werden.

Gastartikel (Danile De Rosa) WordPress-Begriffe für Newbies.docx

Quelle: http://www.techlila.com/

6. Posts

Posts sind die Einträge (oft auch Artikel oder Beiträge genannt), die auf der Startseite des Blogs angezeigt werden. Normalerweise befinden sich die frischsten Beiträge ganz oben im Blog und zu älteren Posts muss man einfach nach unten scrollen. Man kann Posts in den Archiven, Kategorien, veröffentlichen Posts und anderen Widgets finden. Außerdem beinhaltet die URL eines Posts das Datum der Veröffentlichung.

7. Themes

Themes (auch Templates oder Vorlagen genannt) nehmen auch einen wichtigen Platz unter den WordPress-Begriffen ein. Ein Template stellt eine Designvorlage für Ihre WordPress-Seiten dar. Das Template ist dafür verantwortlich, welche Präsenz Ihre Webseite für die Besucher haben wird. Damit eine WordPress-Seite erfolgreich läuft, muss man unbedingt ein Theme haben. Daher ist bei jeder WordPress-Installation ein Standard-Theme (also kostenlos) vorgesehen.

Genauso wie bei Plugins gibt es unzählige Standard- (kostenfreie) und Premium- (kostenpflichtige) WordPress-Themes.
Falls Sie sich noch nicht endgültig entscheiden haben und WordPress erst einmal ausprobieren möchten, stellen Standard-Themes eine gute Lösung dar.  Premium WordPress-Themes bieten vor allem zusätzliche Funktionen, großartige Designmöglichkeiten, einen reinen Code und professionelle technische  Unterstützung. WordPress ist sehr anpassungsfähig und lässt die Einrichtung beliebiger Typen von Webseiten zu. Es bieten sich zahlreiche Blog-Themes, Business-Themes, Templates für Ihr Portfolio und auch hunderte von Themes für ein Online-Geschäft an.

Gastartikel (Danile De Rosa) WordPress-Begriffe für Newbies.docx

Quelle: http://www.templatemonster.com/de/type/wordpress-themen/

8. Sidebar

Themes (auch Templates oder Vorlagen genannt) nehmen auch einen wichtigen Platz unter den WordPress-Begriffen ein. Ein Template stellt eine Designvorlage für Ihre WordPress-Seiten dar. Das Template ist dafür verantwortlich, welche Präsenz Ihre Webseite für die Besucher haben wird. Damit eine WordPress-Seite erfolgreich läuft, muss man unbedingt ein Theme haben. Daher ist bei jeder WordPress-Installation ein Standard-Theme (also kostenlos) vorgesehen. Genauso wie bei Plugins gibt es unzählige Standard- (kostenfreie) und Premium- (kostenpflichtige) WordPress-Themes.

Falls Sie sich noch nicht endgültig entscheiden haben und WordPress erst einmal ausprobieren möchten, stellen Standard-Themes eine gute Lösung dar.  Premium WordPress-Themes bieten vor allem zusätzliche Funktionen, großartige Designmöglichkeiten, einen reinen Code und professionelle technische  Unterstützung. WordPress ist sehr anpassungsfähig und lässt die Einrichtung beliebiger Typen von Webseiten zu. Es bieten sich zahlreiche Blog-Themes, Business-Themes, Templates für Ihr Portfolio und auch hunderte von Themes für ein Online-Geschäft an.

9. Widgets

Widgets befinden sich in der Sidebar, und man kann sie beliebig per Drag-and-Drop sortieren und auswählen. Diese kleinen, zusätzlichen Erweiterungen im Administrationsbereich zeigen meistens Informationen über Ihre Webseite, Ihren Blog oder über Sie. Auf Ihrer Webseite werden die Widgets dann so angezeigt, wie sie auch im Admin-Bereich sortiert sind.

Gastartikel (Danile De Rosa) WordPress-Begriffe für Newbies.docx

Quelle: http://smallenvelop.com/

10. Updates

Eine ganz besondere und wichtige Rolle bei der WordPress-Verwendung spielen Updates. Sie erlauben es, Ihre eingesetzten Plugins und Themes regelmäßig zu aktualisieren. Der aktuellste Stand Ihrer WordPress-Seite garantiert, dass sie von Hacker-Angriffen aus dem Internet geschützt ist. Das Dashboard wird Ihnen signalisieren, wenn Plugins, Themes, oder sogar das ganze WordPress-System nicht mehr auf dem aktuellsten Stand sind und welche Updates vorgenommen werden müssen.

Fazit

In diesem Beitrag habe ich versucht, die wichtigsten WordPress-Begriffe für Einsteiger zu beschreiben. Wenn diese Informationen Ihnen weiterhelfen, sich mit WordPress besser auseinander zu setzen, würde ich mich freuen. Also, keine Angst vor dem Ausprobieren! Testen Sie Themes und Plugins – und WordPress wird Ihnen ganz sicher viel Spaß bringen.

Haben Sie noch Fragen oder Unklarheiten? Welche Begriffe würden Sie noch hinzufügen? Und welche bedürfen noch einer Erklärung? Teilen Sie uns Ihre Meinung mit. Über Ihr Feedback würden wir uns sehr freuen.


13 (1)

Ein Artikel von Andreas Steiner

Andreas Steiner – ist Mitarbeiter bei TemplateMonster engagiert sich aktiv dafür, dass die Gäste aus Deutschland gut mit unseren Produkten zurecht kommen und zufrieden sind. Außerdem schreibt er gern Beiträge zum Thema WordPress und allem, was damit zusammenhängt.

]]>
https://www.danielederosa.de/wordpress-begriffe-fuer-newbies/feed/ 5
WordPress Backend gestalten mit Plugin https://www.danielederosa.de/wordpress-backend-gestalten-mit-plugin/ https://www.danielederosa.de/wordpress-backend-gestalten-mit-plugin/#comments Fri, 27 Nov 2015 13:37:13 +0000 http://www.danielederosa.de/?p=2845 Ich habe ein WordPress Plugin geschrieben, mit dem sich Benutzer ganz simpel mit Live-Preview ein eigenes Design / Color-Scheme für das WordPress Backend erstellen können. Außerdem kann der Login-Screen individualisiert werden, beispielsweise mit eigenem Logo und einer favorisierten Farbumgebung.

Das Plugin kann vom WordPress-Repository direkt über „Plugins -> Installieren“ installiert werden, sucht dafür nach „Backend Designer“.

Link zum Plugin

Videovorschau

Fotos

screenshot-1 screenshot-2 screenshot-3 screenshot-4

]]>
https://www.danielederosa.de/wordpress-backend-gestalten-mit-plugin/feed/ 2
Schnelle Checklisten erstellen mit CheckIt https://www.danielederosa.de/schnelle-checklisten-erstellen-mit-checkit/ https://www.danielederosa.de/schnelle-checklisten-erstellen-mit-checkit/#respond Wed, 25 Nov 2015 21:09:08 +0000 http://www.danielederosa.de/?p=2833 Bei diesem Online-Tool geht es wirklich nur um schnelle Checklisten! Kein aufgepumpter Schnickschnack und Funktionen, die man für seinen aktuellen Zweck vielleicht garnicht benötigt.Bildschirmfoto 2015-11-25 um 22.10.37

Zu gocheckit.de

]]>
https://www.danielederosa.de/schnelle-checklisten-erstellen-mit-checkit/feed/ 0
Projekt Foodarea https://www.danielederosa.de/projekt-foodarea/ https://www.danielederosa.de/projekt-foodarea/#respond Thu, 12 Nov 2015 09:30:45 +0000 http://www.danielederosa.de/?p=2828 Seit kurzem ist mein Projekt Foodarea.de online. Mit dieser Plattform haben Menschen die Möglichkeit, sich ganz ohne technische Erfahrung ihren eigenen Foodblog zu erstellen, gestalten und individuell anzupassen. Eine Plattform für jeden, der gerne Rezepte schreibt und sie mit der Welt teilen möchte.

Anschauen kann man sich die Sache direkt auf www.foodarea.de

]]>
https://www.danielederosa.de/projekt-foodarea/feed/ 0
Elemente vertikal zentrieren mit Hilfe von reinem CSS https://www.danielederosa.de/elemente-vertikal-zentrieren-mit-css/ https://www.danielederosa.de/elemente-vertikal-zentrieren-mit-css/#respond Tue, 03 Nov 2015 11:18:38 +0000 http://www.danielederosa.de/?p=2802 Das horizontale Zentrieren von Elementen sollte für den Webentwickler kein Problem sein, schwieriger wird es allerdings in der Vertikalen. In diesem Artikel möchte ich Dir zwei reine CSS-Lösungen vorstellen.

HTML-Code

Gehen wir von folgender Ausgangslage aus:

<div id="parent">
  <div class="child">
    <h2>Dieser Text soll vertikal zentriert werden</h2>
  </div>
</div>

Display: Flex

Flexbox wird von allen modernen Browsern unterstützt, eine Übersicht der Supports kannst Du Dir hier verschaffen. Bei dieser Methode bekommt lediglich das direkte Elternelement bestimmte Anweisungen:

#parent {
  display: flex; /* Aktiviert das Flex-Modell */
  align-items: center; /* Zentriert den Child vertikal, relativ zum Parent */
  justify-content: center; /* Zentriert den Child horizontal, relativ zum Parent */
}

Der Text sollte in diesem Beispiel nun sowohl vertikal, als auch horizontal zentriert sein.

Display: table

Das Flexbox-Modell ist noch recht neu, weswegen ältere Browser es nicht unterstützen. Alternativ kannst Du Elemente auch mit display: table und display: table-cell vertikal zentrieren. Der Parent bekommt in dem Fall display: table, das Child-Element display: table-cell. Im Anschluss verhalten sich die Elemente wie eine Tabelle und können mit vertical-align: middle zentriert werden. Wichtig: Falls der Parent vorher ein Block-Element war, wird es nötig sein, ihm die Breitevon 100% manuell zuzuweisen.

#parent {
  display: table;
  width: 100%;
  height: 10em;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

Welche ist Deine favorisierte Methode zum vertikalen Zentrieren von Elementen?

Quelle: Kulturbanause

]]>
https://www.danielederosa.de/elemente-vertikal-zentrieren-mit-css/feed/ 0
WordPress: Verschiedene Browser und Betriebssysteme mit CSS ansprechen https://www.danielederosa.de/wordpress-verschiedene-browser-und-betriebssysteme-mit-css-ansprechen/ https://www.danielederosa.de/wordpress-verschiedene-browser-und-betriebssysteme-mit-css-ansprechen/#respond Thu, 21 May 2015 11:26:25 +0000 http://www.danielederosa.de/?p=2750 Das Einfügen der body_class()-Funktion in den Body-Tag Deiner Website gibt Dir seitenbezogen verschiedene Klassen aus. So hast Du die Möglichkeit, bestimmte Seitenbereiche mit CSS effizienter anzusprechen. Zudem gibt es die Möglichkeit, die Funktion so zu erweitern, dass sie nicht nur seitenbezogene Klassen generiert, sondern auch browser- und betriebssystemabhängige.

Füge dafür folgendes in Deine functions.php ein:

<?php

function drwp_browser_body_class($classes) {
  
    global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
  
    if($is_lynx) $classes[] = 'lynx';
    elseif($is_gecko) $classes[] = 'gecko';
    elseif($is_opera) $classes[] = 'opera';
    elseif($is_NS4) $classes[] = 'ns4';
    elseif($is_safari) $classes[] = 'safari';
    elseif($is_chrome) $classes[] = 'chrome';
    elseif($is_IE) {
        $classes[] = 'ie';
        if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
            $classes[] = 'ie'.$browser_version[1];
    } else $classes[] = 'unknown';
    if($is_iphone) $classes[] = 'iphone';
    if ( stristr( $_SERVER['HTTP_USER_AGENT'],"android") ) {
         $classes[] = 'android';
    } else if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
         $classes[] = 'osx';
    } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {
         $classes[] = 'linux';
    } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
         $classes[] = 'windows';
    }
    
    return $classes;
  
}
add_filter('body_class','drwp_browser_body_class');

?>

Einbinden musst Du die Funktion wie folgt:

<body <?php body_class(); ?>>

… und schon werden Dir verschiedene Klassen generiert, mit denen Du verschiedene Browser und Betriebssysteme anpassen kannst.

Quelle: drwp.de

]]>
https://www.danielederosa.de/wordpress-verschiedene-browser-und-betriebssysteme-mit-css-ansprechen/feed/ 0
WordPress Backend für Kundenprojekte sinnvoll optimieren https://www.danielederosa.de/wordpress-backend-fuer-kundenprojekte-sinnvoll-optimieren/ https://www.danielederosa.de/wordpress-backend-fuer-kundenprojekte-sinnvoll-optimieren/#comments Wed, 20 May 2015 15:58:54 +0000 http://www.danielederosa.de/?p=2724 Gerade für Kundenprojekte ist es durchaus sinnvoll, das WordPress-Backend individuell zu gestalten, nicht benötigte Menüelemente zu entfernen und das Wording anderer projektbezogen anzupassen. In diesem Artikel möchte ich Dir eine klare Anleitung geben, wie die Anpassung des Backends ganz ohne Plugin zu realisieren ist.

Vorbereitung

Die Website, die Du für Deinen Kunden erstellt hast, ist soweit fertig. Bevor es an die Optimierung des Backends geht, möchte ich Dir zwei Möglichkeiten der Realisierung zeigen.

1. Optimierung über das Theme

Du optimierst das Backend über das Theme selbst. In diesem Fall wird jeglicher Code in die Datei functions.php geschrieben, die sich im Root (Hauptordner) Deines Themes befinden sollte.

2. Optimierung über ein eigenes Plugin

Du erstellst Dir für die Backend-Optimierungen ein eigenes Plugin. Der Vorteil bei dieser Methode ist, dass es dann im Grunde nichts mehr mit dem verwendeten Theme zu tun hat und Du dieses global für weitere Installationen mit eventuell anderen Themes verwenden kannst. Bei dieser Methode sollte man den Code so global wie möglich halten.

Für diese Anleitung wähle ich die erste Methode, da das Erstellen eines eigenen Plugins nochmal eine andere Baustelle ist, über die ich demnächst einen eigenen Artikel schreiben und hier verlinken werde.

Jetzt wird optimiert!

Öffne nun die Datei functions.php, wie oben erwähnt sollte sie sich im Root Deines verwendeten Themes befinden. (wp-content/themes/theme-name/functions.php). Die Codezeilen, die nun dazukommen, fügst Du am besten ganz unten in der Datei ein.

Verbergen von nicht benötigten Menüpunkten

Zunächst möchten wir Menüs oder Untermenüs verbergen, die ohnehin nur dazu da sind, um den ahnungslosen Kunden zu verwirren. Damit soll gesagt sein, dass – je nach Website – einzelne Menüpunkte vielleicht überlüssig sind und nicht benötigt werden. Für dieses Vorhaben verwendet WordPress die Funktion remove_menu_page().

<?php
function dd_remove_menus(){
  
  remove_menu_page( 'index.php' );                  //Dashboard
  remove_menu_page( 'edit.php' );                   //Posts
  remove_menu_page( 'upload.php' );                 //Media
  remove_menu_page( 'edit.php?post_type=page' );    //Pages
  remove_menu_page( 'edit-comments.php' );          //Comments
  remove_menu_page( 'themes.php' );                 //Appearance
  remove_menu_page( 'plugins.php' );                //Plugins
  remove_menu_page( 'users.php' );                  //Users
  remove_menu_page( 'tools.php' );                  //Tools
  remove_menu_page( 'options-general.php' );        //Settings
  
}
add_action( 'admin_menu', 'dd_remove_menus' );
?>

In den Kommentaren kann man gut erkennen, welche Menüs mit den entsprechenden Codezeilen entfernt werden. Wichtig zu wissen ist, dass diese lediglich im Menü versteckt werden und mit einer manuellen Eingabe in der Adresszeile des Browsers trotzdem aufrufbar sind.

Das Verstecken der Untermenüs ist nicht viel schwieriger. Dafür ist die Funktion remove_submenu_page() verantwortlich.

<?php

add_action( 'admin_menu', 'dd_adjust_the_wp_menu', 999 );
function dd_adjust_the_wp_menu() {
  $page = remove_submenu_page( 'themes.php', 'widgets.php' );
}

?>

Der erste Parameter (themes.php) bestimmt den Hauptmenüpunkt, in dem Fall „Design“ bzw. „Appearance“, der zweite Parameter (widgets.php) spricht das Untermenü an. In diesem Beispiel haben wir also das Untermenü „Widgets“ von der Menünavigation entfernt.

Einzelne Menüpunkte umbenennen

Manchmal ist es auch hilfreich, das Wording von bestimmten Menüelementen projektbezogen anzupassen. Dieses Vorhaben ist ebenfalls ziemlich simpel, wenn auch etwas umständlicher als das Entfernen.

<?php

function dd_rename_post_menu() {
  global $menu;
  $menu[5][0] = 'Rezepte'; // Änderung von "Beiträge" in "Rezepte"
}
add_action( 'admin_menu', 'dd_rename_post_menu' );

?>

In diesem Fall habe ich den Menüpunkt „Beiträge“ in „Rezepte“ umbenannt. Dafür verwende ich die globale Variable $menu. Das [5][0] steht für eine bestimmte Position im Array, welches Du Dir wie folgt ausgeben kannst, um zu ermitteln, mit welcher Position Du welchen Menüpunkt ansprechen kannst. Trage dafür unter der Zeile „global $menu;“ folgendes ein:

$menu_array = json_encode($menu);
print_r($menu_array);

Danach solltest Du in Deinem Backend den kompletten Array sehen. Nicht erschrecken! 😉 Dort kannst Du zum Beispiel folgende Positionen feststellen:

  • [2] = Dashboard
  • [5] = Beiträge
  • [25] = Kommentare
  • [65] = Plugins
  • und so weiter…

Nach Fertigstellung kannst Du die zwei Zeilen mit gutem Gewissen nochmal entfernen.

Den Login-Bereich anpassen

Dazu habe ich in diesem Artikel bereits einiges erzählt.

Individuelles Styling des Backends

Richtig gelesen! Du hast die Möglichkeit, eine separate CSS-Datei in Dein Backend zu laden und dementsprechend das Design individuell anzupassen. Deine CSS-Datei lädst Du wie folgt in Dein Backend:

<?php

add_action('admin_head', 'dd_load_admin_styles');
function dd_load_admin_styles() {
  wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/css/admin.css');
}

?>

Nun kannst Du mit Deiner eingebundenen CSS-Datei jedes Element ansprechen, welches Du im Backend gerne anpassen würdest.

Nicht benötigte Widgets entfernen

Manchmal gibt es von WordPress mitgelieferte Standardwidgets, die wir nicht benötigen. Mit diesen Codezeilen hast Du die Möglichkeit, einzelne zu deaktivieren:

<?php

add_action('widgets_init', 'dd_remove_default_wigets');
function dd_remove_default_wigets() {
  unregister_widget('WP_Widget_Pages');
  unregister_widget('WP_Widget_Calendar');
  unregister_widget('WP_Widget_Archives');
  unregister_widget('WP_Widget_Links');
  unregister_widget('WP_Widget_Meta');
  unregister_widget('WP_Widget_Search');
  unregister_widget('WP_Widget_Text');
  unregister_widget('WP_Widget_Categories');
  unregister_widget('WP_Widget_Recent_Posts');
  unregister_widget('WP_Widget_Recent_Comments');
  unregister_widget('WP_Widget_RSS');
  unregister_widget('WP_Widget_Tag_Cloud');
  unregister_widget('WP_Nav_Menu_Widget');
}

?>

In diesem Beispiel habe ich alle Standardwidgets entfernt. Die Bezeichnung im Parameter sollte erklären, welche Zeile für welches Widget zuständig ist. Über die Funktion unregister_widget() kannst Du hier mehr lesen.

Fazit

Nach dem Umsetzen dieser Beispiele sollte das Backend für Deinen Kunden schon weit aufgeräumter und übersichtlicher sein. Du würdest gerne etwas anpassen, was Du in meinem Artikel nicht findest? Schreibe mir dazu gerne was in den Kommentaren und ich passe den Beitrag nach und nach an.

Viel Spaß beim Optimieren Deiner WordPress-Seiten!

Zusatz

Es ist prinzipiell sinvoller, das Backend lediglich für Nicht-Admins anzupassen. Abhilfe schafft hier folgende Abfrage:

<?php
function dd_remove_menus(){
  
  if ( !current_user_can('manage_options') ) {
    remove_menu_page( 'index.php' );                  //Dashboard
  }

}
add_action( 'admin_menu', 'dd_remove_menus' );
?>

In diesem Beispiel wurde der Menüpunkt „Dashboard“ für alle Nicht-Administratoren entfernt. Über die Möglichkeiten der Abfragen kannst Du hier mehr lesen.

 

]]>
https://www.danielederosa.de/wordpress-backend-fuer-kundenprojekte-sinnvoll-optimieren/feed/ 12