Gruene-ch

Wordpress Theme im CI der Grünen Schweiz

View the Project on GitHub politbuero-kampagnen/gruene-ch

Bedingungen

Die folgenden Themes dürfen von Mitgliedern der Grünen Schweiz kostenlos verwendet werden. Sie stehen unter GPL. D.h. dass allfällige Anpassungen ebenfalls frei verfügbar gemacht werden müssen. Das Logo der Grünen darf nur von Mitgliedern resp. Mitgliedsparteien der Grünen genutzt werden. Wichtig: Es wird keine Unterstützung bei der Installation, kein Support bei der Konfiguration des Themes oder ähnliches geleistet. Wer diese Dienstleistungen in Anspruch nehmen will, melde sich bei balthasar.glaettli@politbuero-kampagnen.ch der Kontakte von Parteimitgliedern oder

Installation

Die Themes sind nicht unter Wordpress.org verfügbar. Darum wird hier die Installation erklärt. Forefront (das Grundtheme von gruene-ch) muss zuerst mittels Rechtsklick-"Sichern unter..." auf den lokalen Computer heruntergeladen werden und dann in einer bestehenden Worpress Installation im Administrationsbereich hochgeladen werden unter "Design > Themes > Installieren > Theme hochladen". Nachdem das Eltern-Theme "Forefront" installiert wurde, muss das Plugin GitHub Updater installiert werden, nach dem gleichen Vorgehensmuster. Danach kann via GitHub Updater das auf Forefront aufbauende angepasste "Kind-Theme" gruene-ch installiert werden. Dieses wiederum zeigt dann innerhalb des Wordpress-Administrationsbereichs automatisch an, falls neue Versionen von gruene-ch existieren.

  1. Voraussetzung ist eine funktionierende Wordpress-Grund-Installation mit Administrationszugang
  2. Grundtheme Forefront auf den lokalen Computer herunterladen (hier mit Rechtsklick > Sichern unter...) und dann mit "Design > Themes > Installieren > Theme hochladen" hochladen.
  3. GitHub Updater Plugin (hier mit Rechtsklick > Sichern unter...) auf den lokalen Computer herunterladen, im Wordpress durch Hochladen installieren, aktivieren
  4. Unter "Einstellungen > GitHub Updater" den Tab "THEMES" anwählen und unter Motiv URI politbuero-kampagnen/gruene-ch angeben und unten "Theme installieren" klicken.
  5. Unter "Design > Themes" klären ob das Theme aktiviert ist, gegebenenfalls aktivieren.
  6. Nun zeigt das Theme selbst an, ob es noch zusätzliche Plugins braucht, die noch nicht installiert sind, diese mit dem entsprechenden Link automatisch installieren.
  7. Das Jetpack Plugin benötigt für bestimmte Funktionen noch einen Gratis-Account bei Wordpress. Der Anleitung im Menu Jetpack folgen. Die notwendige Funktion für die Testimonials funktioniert aber auch ohne Account bei Wordpress.

Konfiguration des Themes

BILD 03 (9) (8) (8) (7) (6) (6) (5) (5) (4) (3)(1)(2)

  1. Das Menu kann definiert werden
    Unter Design > Menus kann ein Menu erstellt und dieses dann unter Design > Menus > Positionen verwalten der Position "Primary Menu" zugewiesen werden. Sinnvollerweise arbeitet man mit einer Menustruktur mit Haupt- und Untermenupunkten.
  2. Definieren der Homepage (Eingangsseite).
    Um eine statische Homepage zu erstellen, muss zuerst unter Seiten > Erstellen eine neue Seite erstellt werden. Diese möglichst Leer lassen, vielleicht mit einem Titel "Willkommen!" versehen. Ebenfalls für die Blogbeiträge (News) eine weitere Seite unter Seite > Erstellen einrichten und mit "Blog" betiteln.
    Unter Design > Anpassen > Statische Startseite die Option "Eine statische Seite" wählen und die beiden eben erzeugten Seiten der Startseite resp. der Beitragsseite zuweisen.
  3. Titelfoto, Titel definieren
    Die Titelseite muss unter Attribute > Template das Template "Front Page" zugewiesen erhalten. Die Titelfoto, der Titel und allenfalls ein Button werden definiert in der eben erzeugten Startseite. Als Titelfoto dient das Foto, das bei der Bearbeitung der Startseite rechts unten als Beitragsbild hinzugefügt wurde. Die Ecken werden automatisch gerundet. Als Titel erscheint der Titel der Startseite.
  4. Button definieren
    Einen Button kann man hinzufügen, indem man einen entsprechenden Link in den Text der Startseite schreibt, z.B. so
    Unterstütze die Kandidatur
  5. Frontpage Widgets erste Reihe
    Unter dem Titelbild werden Frontpage Widgets angezeigt, diese unter Design > Widgets > Frontpage Widget Area One hinzufügen. Es können kein, ein, zwei oder auch drei Widgets hinzugefügt werden.
  6. Frontpage Widgets zweite Reihe
    Eine zweite Reihe Frontpage Widgets können unter Design > Widgets > Frontpage Widget Area Two hinzugefügt werden. Es können kein, ein, zwei oder auch drei Widgets hinzugefügt werden.
  7. Testimonials (Referenzen)
    Damit die Testimonials funktionieren, muss das Jetpack Plugin installiert sein. Das Theme melde einen Fehler, falls das Plugin nicht installiert ist. Wenn das Plugin installiert ist, dann erscheint unter den Menus Beiträge, Medien, Seiten das neue Menu Referenzen.
    Dann kann man einzelne Referenzen (Testimonials) im Menu Referenzen hinzufügen. Falls mehr als zwei Referenzen eingegeben werden, werden diese zufällig auf der Homepage angezeigt. Das Bild zum Testimonial ist in der einzelnen Referenz als Beitragsbild (rechts unten) hinzuzufügen
  8. Fusszeile (Footer Widget Area)
    Die Fusszeilen definiert man im Menu Design > Widgets > Footer Widget Area mit Widgets

Grundsatzinfo zu Eltern Theme Forefront

= How to setup the front page like the demo site? =

The demo site URL: http://forefrontdemo.wordpress.com/?demo

  1. Create or edit a page, and assign it to the Front Page template from the Page Attributes module: https://cloudup.com/cCO6975qFO5
  2. Go to Settings Reading and set "Front page displays" to "A static page".
  3. Select the page you just assigned the Front Page template to as "Front page" and then choose another page as "Posts page" to serve your blog posts.
  4. Make sure you add a featured image to your front page. This image will be shown in the large hero area below the top menu.

The front page also can display widgets and two testimonials. The page has two dedicated widget areas, Front Page Widget Area One and Front Page Widget Area Two. You can add as many as widgets you want!

Below the widget areas, two randomly chosen testimonials (see below) will be displayed. All you need to do is add at least two testimonials, and you're all set.

Forefront makes easy to add buttons without learning CSS, you just need to add a class, "button" to your link when you are editing in Text (HTML) view. The class makes a link look this:https://cloudup.com/cyVu7ymhmfV

If you like more minimal style, use "button-minimal" class instead. It makes a link look this:https://cloudup.com/cKgOahbNyM3

= How to use the grid page template? =

Another useful page template is the grid template. It's great for a portfolio page, a case study page, or a page to introduce your team members.

  1. Create or edit a page, and assign it to the Grid Page template from the Page Attributes module.https://cloudup.com/cl0QFolBf7j This placeholder page will be used to display a small blurb and thumbnail image for each of the child pages (aka sub-pages) you'll create next.
  2. Create additional pages that you want to show on the grid page you've just created above. In the Page Attributes box on each child page, select the grid page you created above as the parent page.https://cloudup.com/cJvJfoWd1xN
  3. For the best result, make sure you add a featured images to each child page, so it'll be displayed above the blurb on the main grid page. https://cloudup.com/cxI8Glh0BAa

= I don't see the Testimonials menu in my admin, where can I find it? =

To make the Testimonials menu appear in your admin, you need to install the Jetpack plugin (http://jetpack.me) because it has the required code needed to make custom post types (http://codex.wordpress.org/Post_Types#Custom_Post_Types) work for the Forefront theme.

Once Jetpack is active, the Testimonials menu will appear in your admin, in addition to standard blog posts. No special Jetpack module is needed and a WordPress.com connection is not required for the Testimonials feature to function. Testimonials will work on a localhost installation of WordPress if you add this line to wp-config.php

define( 'JETPACK_DEV_DEBUG', TRUE );

The Testimonials admin: https://cloudup.com/c3Q7tbPQQR2

On your site, two randomly chosen testimonials appear on the front page template so that every testimonial has an equal chance to be there. All testimonials are displayed in a testimonial archive page.

= Where is the page that lists all testimonials? =

Let's say you have a site at: http://mygroovydomain.com

The URL of the testimonial archive page will be: http://mygroovydomain.com/testimonial/

You'll need pretty permalinks (any structure) for this URL to work though. If you're stuck with default permalinks - your links have a query string at the end, like ?p=123 - then your testimonial archive can be accessed by adding this immediately after your URL:

/?post_type=jetpack-testimonial

The testimonial archive page: https://cloudup.com/cjfTZ6j3zZ3

= How to customize the testimonial archive page? =

Once you have published a testimonial, under the Testimonials menu in your admin, you will see a link that takes you to the Customizer where you can edit the page title, add an intro text and a featured image. Just make sure you have pretty permalinks (any structure) for this to work.

Customizing the testimonial page: https://cloudup.com/cBy4RuWyees

= How to add the social links in the footer? =

  1. Make sure you install Jetpack (http://jetpack.me) and activate the plugin, and connect it to your WordPress.com account.
  2. In the Jetpack dashboard, activate the Publicize module.
  3. Under Settings Sharing, connect to your preferred social network(s).
  4. Under Appearance Customize, in the Connect panel, select the appropriate social-media accounts and save your settings.
  5. The social-media icons for the accounts you've selected should now appear in your footer.

Connect setting in the Customizer: https://cloudup.com/cokKpvFVQO8

== Quick Forefront Specs (all measurements in pixels) ==

  1. On single posts and the default page template the main column maximum width is 600.
  2. On the full width page template the main column maximum width is 1050.
  3. The featured image works best with images at least 1230 wide for pages, 810 for posts.
  4. The primary sidebar maximum width is 270.
  5. The maximum width for a custom header image is 330.