Cocoa Dokumentation

Demo / Theme kaufen

Video Tutorial

Cocoa Maße in Pixel:
• Standard Artikelbreite: 670px (960px auf großen Bildschirmen)
• Beitragsbild-Breite (Thumbnails): 905px (1194px auf großen Bildschirmen)
• Standard-Breite Seiten: 905px
• max. Breite für Logo/Headerbild: 905px (1194px auf großen Bildschirmen)
• Bild-Breite About-Widget Bild: mind. 600px
Bitte beachten: Um Artikelbilder von bereits veröffentlichten Artikeln anzupassen, bitte das Regenerate Thumbnails Plugin installieren und einmal laufen lassen.

1. Theme-Installation

Nach dem erfolgreichen Theme- oder Theme Bundlekauf erhältst du eine Email mit deinem individuellen Download-Link. Über diesen Link kannst du dir den Cocoa Theme-Ordner (cocoa.zip Datei) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um das Cocoa-Theme direkt über den WordPress-Adminbereich zu installieren, klickst du im WordPress-Admin-Menü auf Design → Themes. Hier findest du neben dem Tab Themes verwalten den Tab Themes installieren. Ganz oben in der Leiste wählst du jetzt den Menü-Punkt Hochladen.

Der Cocoa Theme-Ordner muss für das Hochladen direkt über den WordPress-Adminbereich immer noch im .zip-Format sein. Wähle also die Datei cocoa.zip aus und klicke auf den Button Jetzt installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Cocoa-Theme ist jetzt das aktuell aktive Theme deiner Webseite.

1.2. Installation via FTP-Programm

Alternativ zur Installation des Themes direkt im Adminbereich kannst du den entzipten Cocoa Theme-Ordner auch mit Hilfe eines FTP-Programms (z.B. dem kostenlosen Programm Filezilla) auf deinen Serverplatz hochladen. Dafür musst du den kompletten Theme-Ordner in den WordPress Installations-Ordner …/wp-content/themes/ hochladen.

Nach dem Upload des Theme-Ordners findest du Cocoa in der Vorschau-Ansicht unter Design → Themes bei den verfügbaren Themes in deinem WordPress-Adminbereich. Dort kannst du das Theme aktivieren.

2. Widget-Bereiche und Widgets

Cocoa hat zwei Widgetbereiche, einen Footer- und einen Overlay-Headerwidgetbereich. Du kannst alle Standard-Widgets und Jetpack-Widgets nutzen, sowie die folgenden eigenen Cocoa-Widgets:

2.1. About-Widget

Für das About-Widget musst du als erstes ein About-Foto vorbereiten (Mind-Breite 600px, Höhe flexibel, das Bild in der Live-Demo ist 843px hoch) und dieses über den Medienuploader unter Medien → Datei hinzufügen hochladen. Jetzt kannst du die Bild-URL (siehe Speichern-Box/Datei ULR) kopieren und im About-Widget einfügen. Außerdem musst du noch die Breite und Höhe des Bildes eintragen (nur die Zahl, keine Einheit).

Du kannst auch einen kleinen Bild-Untertitel angeben, einen About Slogan-Spruch (wird in größerer Schrift angezeigt) und dein About Text. In alle Text-Eingabefelder kannst du auch HTML eintragen und so z.B. Links einfügen:

<a href="Link URL">Dein Link Text</a>
2.2. Social Links

Für die Social Links mit Icon und Text darunter musst du als erstes ein neues, individuelles Menü mit dem Namen „Social“ unter Design → Menüs anlegen. Du kannst die Links zu deinen sozialen Profilen mit Hilfe von „Links“ eintragen und den Link-Text unterhalb des Icons bei „angezeigter Name“ noch einmal selbst bestimmen.

Individuelles Menü für die Social Links anlegen.
Individuelles Menü für die Social Links anlegen.

URLs der folgenden Dienste werden mit Icons angezeigt:

Codepen, Digg, Dropbox, Facebook, Flickr, Google+, Instagram, LinkedIn, Pinterest, Path, Dribbble, PollDaddy, GetPocket, Reddit, Skype, StumpleUpOn, Tumblr, Twitter, Vimeo, YouTube, WordPress.com, WordPress.org, Feed (alle URLs mit /feed) und Email (mit mailto).

Alle Cocoa Social Links.
Alle Cocoa Social Links.

Hast du deine Links eingetragen musst du dein Menu noch als „Social Links Menü“ bei den Menü-Einstellungen unten im Menü mit einem Häkchen markieren.

Jetzt kannst du wieder zurück zu deinen Widgets unter Design → Widgets gehen und das Individuelle Menü-Widget nutzen, um dein „Social“ Menü in einem Widgetbereich anzuzeigen.

2.3. Zitat-Widget (Quote Cocoa)

In beide Widgetbereiche kannst du auch das Cocoa Zitat-Widget integrieren. So kannst du einen deiner Lieblingssprüche oder Zitate auf deinem Blog anzeigen. Du kannst einfach den Zitat-Text in das Feld eintragen und optional auch noch den Autor des Zitats angeben. Du kannst für einen Link zur Webseite des Zitat-Autors wieder HTML nutzen:

by <a href ="AuthorURL">Author Name</a>
2.4. Neueste Artikel nach Kategorien-Widget

Ein weiteres schönes, individuelles Cocoa Widget ist das Neueste Artikel nach Kategorien-Widget. Hier kannst du 3, 6 oder 9 Widgets in einer drei-spaltigen Ansicht anzeigen (mit Artikelbildern, falls vorhanden) anzeigen. Du kannst bestimmen, ob du einfach nur die neuesten Artikel anzeigen möchtest (standard) oder ob du nur Artikel einer oder mehrerer Kategorien anzeigen möchtest (z.B. neueste Reisegeschichten, neueste Rezepte usw.).

Um die Kategorien anzugeben, musst du die Kategorie-ID Nummer angeben (bei mehreren IDs mit Komma getrennt). Die Katgorie-IDs findest du, wenn du unter Beiträgen → Kategorien die gewünschte Kategorie anklickst und dann in der Browserleiste die URL anschaust und nach der ID Nummer im Format ID=3 (für Kategorie-Nummer 3) suchst.

3. Theme Anpassungen

Über Design → Anpassungen kannst du den WordPress-Customizer mit einer Live-Vorschau aufrufen. Dort findest du alle Anpassungs-Optionen für das Cocoa-Theme.

Du kannst unter Farbe Logo- oder Headerbild (mit der max. Breite von 1194px auf großen Monitoren und 905px auf Laptop-Bildschirmen) kannst du unter Design → Kopfzeile einfügen und den Standard-Titel und Beschreibungstext löschen.

Möchtest du einen eigenen Theme-Hintergrund (Farbe oder Bild) nutzen, kannst du die Anpassungen unter Design → Hintergrund nutzen.

4. Individuelle Menüs

Im Adminbereich unter Design → Menüs kannst du dir ein eigenes Haupt-Menü für deine Hauptnavigation im Headerbereich von Cocoa einrichten. Du kannst ein Menü erstellen, indem du einen beliebigen Namen für dein Menü wählst und dann deine gewünschten Seiten, Links, Kategorien, Schlagworte oder Formatvorlagen in dein Menü addierst. Nachdem du deine Menüpunkte angelegt hast, musst du dein neues Menü noch unter Menü-Einstellungen unten im Menü als „Haupt-Menü“ markieren und das neue Menü dann speichern.

5. Archiv Seiten-Template

Neben Standardseiten kannst du im Cocoa-Theme auch noch eine eigene Archivseite (hier ein Beispiel der Archiv-Seite in der Live-Demo) anlegen. So können deine Leser schnell einen Überblick über deine veröffentlichen Blog-Artikel bekommen.

Dazu musst du einfach das Archiv Seiten-Template unter Attribute → Template im Adminbereich einer neuen Seite auswählen. Der Inhalt wird dann automatisch in deiner Archivseite angezeigt, einen Seiten-Titel kannst du frei wählen.

6. Typografie Optionen

Du kannst eine Reihe von extra Typografie-Styles im Cocoa-Theme nutzen, um deine Texte noch ansprechender zu präsentieren. Hier findest du auch noch eine Übersicht der Text-Styles in der Live-Demo.

Dropcaps /Initial – Um einen Paragraph z.B. am Anfang eines Artikels hervorzuheben, kannst du einen großen Initial-Buchstaben zu Beginn des Absatzes nutzen. Dazu musst du diesen Code im HTML-Editor auf deinem Artikel oder auf deiner Seite nutzen:

<span class="dropcap">E</span>rster Buchstabe...

Pull Quotes – Um einen Satz im Text noch einmal extra zu betonen, kannst du rechts- und linksbündige Pull Quotes im Text einfügen. Dazu musst du einfach ein oder zwei Sätze in einem p tag mit der CSS-Klasse „pull-left“ oder „pull-right“ einbinden.

<p class="pull-left">Das ist ein linksbündiger Pullquote-Text.</p>

Wide-Content – Um extra Breiten Artikel-Inhalt von 935px statt der Standard-Arikelbreite von 700px (sehr schön für Bilder geeignet) in einem Artikel zu nutzen, kannst diesen Inhalt einfach in einem div-Container mit der CSS-Klasse „wide-content“ einbinden.

<div class="wide-content">
Dein Inhalt hier…
</div>

Zweispaltiger Text – Um einen Text in einer automatischen Zweispaltigkeit anzulegen, kannst du den gewünschten Text in einen Div-Container mit der CSS-Klasse „two-columns“ packen.

<div class="two-columns">

Dein Inhalt hier…

</div>

Side Notes auf Seiten – Auf Standard-Seiten hast du die Option einen linksbündigen, ergänzenden Text einzufügen. Dafür musst du ein „benutzerdefiniertes Feld“ mit dem Namen „sidenote“ anlegen und in den Wert deinen Text eintragen. Du kannst HTML (z.B. für Links im Wert-Text nutzen). Eventuell musst du über den Optionen-Button rechts oben im Adminbereich die Option für benutzerdefinierte Felder erst noch aktivieren.

Schmale Notizen am Textende – Mit Hilfe eines p tags und der CSS-Klasse „note“ kannst du außerdem schmale, ergänzende Texte am Ende deines Textes oder unter einem Absatz einfügen.

<p class="note">
Dein Inhalt hier…
</p>

7. Artikel-Formate

Im Cocoa Theme hast du die Möglichkeit die folgenen Artikel-Formate (Post Formats) zu nutzen: Kurzmitteilung, Link, Zitat, Satusmitteilung, Video und Bild. Du kannst einfach wie gewohnt deinen Artikel-Inhalt (z.B. einen Link, ein Bild oder ein Zitat) einfügen und dann das Artikel-Format in der Box „Formatvorlage“ im Arminbereich deines Artikels wählen.

Die Überschriften der Artikel-Formatartikel werden dann etwas kleiner im Theme dargestellt und die Schriften für Zitate, Links oder Statusmeldungen sind größer.

8. Shortcodes

Du kannst Shortcodes für mehrspaltige Elemente, Infoboxen und Buttons nutzen. Beispiele und alle Codes zum Kopieren/Einfügen der Shortcodes findest du auf der Shortcode-Seite der Cocoa Live-Demo.

9. Unterstützte Plugins

Contact Form 7 für Formulare (z.B. das Kontaktformular)
Jetpack für Teilen-Buttons, Jetpack Widgets, Carousel Galerie-Slideshow, Tiled Gallery und Infinite Scroll
Simple Share Buttons Adder für Teilen-Buttons
Custom Favicon, um ein Favicon und Apple Touch Icon zu integrieren

10. Theme-Übersetzung

Cocoa ist für die Übersetzung in weitere Sprachen vorbereitet. Am besten verwendest du das WordPress-Plugin Codestyling Localisation, wenn du das Theme in eine weitere Sprache übersetzen oder eine Übersetzung anpassen möchtest. (Wenn du deine Übersetzung auch für andere Cocoa-Nutzer zur Verfügung stellen möchtest, würden wir uns sehr freuen.)

11. Child Theme

Falls du Cocoa über die Theme-Optionen hinaus individuell anpassen möchtest, solltest du am besten ein eigenes Child-Theme für deine Anpassungen anlegen. Auf diese Weise können deine Anpassungen bei einem Update des Cocoa Eltern-Themes nicht verloren gehen. Du kannst dir den vorbereiteten Cocoa Child-Theme Ordner herunterladen. So kannst du schnell mit deinen Anpassungen loslegen.

12. Dokumentation drucken oder als PDF speichern

Um die Cocoa Theme-Dokumentation als PDF zu speichern oder auszudrucken, kannst du einfach den Print Friendly-Button klicken und die von dir gewünschten Optionen (z.B. Drucken mit oder ohne Bilder oder nur Ausschnitte der Dokumentation drucken) auswählen.

Print Friendly and PDFAusdrucken / PDF speichern