Theme

Der Blog verwendet das Theme Formation (dieser Artikel bezieht sich auf Version 1.9), woran einige Anpassungen gemacht wurden. Dazu wurde gemäß dem WordPress Codex ein Child Theme erstellt.

Dieses Child Theme besteht aktuell aus fünf Dateien:
  • style.css, um einige Details des Stils selber zu bestimmen
  • functions.php, um das Verhalten einiger Bereiche zu verändern
  • header.php, um das Logo und Titel anzuzeigen und den Untertitel dynamisch einzubinden (basiert auf und überschreibt header.php im Original-Theme)
  • archive.php, welche das bestehende Template für die Autorenseite um Informationen über die Autoren erweitert (basiert auf und überschreibt archive.php im Original-Theme)
  • front-page.php, welche auf der Startseite sowohl einen Willkommentstext als auch die letzten Posts anzeigt (basiert auf index.php im Original-Theme)

Alle Dateien müssen als UTF-8 ohne BOM kodiert werden.

Die Änderungen gegenüber dem Standard-Theme sind hier dateiübergreifend dokumentiert.

Gesamteindruck

Hauptfarbe

Ein wichtiger Aspekt ist die Hauptfarbe des Child Themes. Um unsere Verbundenheit zur Stadt Dortmund auszudrücken wurde hier das Rot aus der Stadtflagge gewählt: #d40000.

Das Theme verwendet als Hauptfarbe Cyan #10b9b9 und nicht alle Vorkommen werden durch das Setzen der Hauptfarbe ersetzt. Die sonstigen Referenzen auf diese Farbe konnten durch eine einfache Suche in Formations style.css gefunden und dann im Child Theme entsprechend ersetzt werden.

Diese Änderungen finden sich am Ende der style.css.

Siehe auch den Abschnitt Links weiter unten.

Link zur Englischen Version in Topbar

Am oberen Rand befindet sich eine Übersichtszeile, in der üblicherweise Kontaktdaten und Links zu sozialen Netzwerken angezeigt werden. Wir geben dort keine Informationen wieder, sondern fügen statt dessen den Link zur englischen Startseite ein.

Dafür wird die header.php passend editiert:

/* header.php */

<div class="topbar">
    <!-- remove phone number template from left topbar -->
    <div class="topbar_content_left"></div>
    <!-- replace social links in right topbar with link to English page -->
    <div class="topbar_content_right"><a class="link-english" href="http://blog.do-foss.de/en/">English</a></div>
</div>

Damit sich der Link gut in die Seite einfügt und weder das Menü nach unten verschiebt noch nach rechts darüber hinaus ragt, musste der Stil ein wenig angepasst werden:

/* style.css */

.topbar {
    padding-left: 10px;
    padding-top: 0;
}
.link-english {
    color: #fff;
    font-family: "source_sans_probold",sans-serif;
    font-size: 1.3rem;
    line-height: 1.3;
    padding: 0 14px;
    text-transform: uppercase;
}
.link-english:visited {
    color: #fff;
}
.link-english:hover {
    color: #d40000;
}

Außerdem entfernen wir das vom Theme gesetzte Handy-Icon:

/* style.css */

.topbar_content_left:before {
    content: "";
}

Logo und Seitentitel im Header

Das Theme sieht ursprünglich nur vor, dass entweder ein Logo oder Seitentitel/-untertitel angezeigt werden. Diese Änderung zeigt beides an.

Dazu wurde die Anzeigung der Site Introduction (also Titel und Untertitel) aus der entsprechenden Verzweigung gelöst.

/* header.php */
<?php if ( get_theme_mod( 'formation_logo' ) ) : ?>

    <div class="site-logo">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo esc_url( get_theme_mod( 'formation_logo' ) ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>
    </div>
<!-- Do-FOSS:
    * show site-introduction even if logo is set, and
    * show random Do-FOSS text -->
<?php endif; ?>

<div class="site-introduction">
    <h1 class="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <p class="site-description"><?php dofoss_description(); ?></p>
</div>
<!-- END Do-FOSS -->

Damit Logo und Site Description gut nebeneinander passen, wurden einige Abstände angepasst:

/* style.css */
.site-header .site-introduction {
    padding: 5px 0;
}

.site-title {
    font-size: 2.6rem;
    padding-left: 12px;
    margin-top: 6px;
}

.site-description {
    margin-top: -12px;
    padding-left: 12px;
    margin-left: 0.15em;
}

Damit Logo und Site Description nebeneinander keine unangenehmen Umbrüche erzeugen, wurde die Breite der Hauptnavigation (des Menüs oben rechts) reduziert:

/* style.css */

.main-navigation {
    width: 60%;
}

Wechselndes Motto im Header

Bei jedem Laden der Seite soll ein neues Motto ausgewählt und im Header in der Site Description angezeigt werden.

Mit meinem (Nicolais) beschränktem Know-How habe ich keine gute Möglichkeit gefunden, das über das Child-Theme zu lösen. Die aktuelle Lösung funktioniert dadurch, dass eine "eigene" header.php die des eigentlichen Themes ersetzt. Dabei ist sie größtenteils identisch, für das wechselnde Motto unterscheidet sie sich nur beim Zusammenstellen des Headers vom Original. Ein Aufruf an bloginfo( 'description' ); wurde folgendermaßen ersetzt:

/* header.php */

<p class="site-description"><?php dofoss_description(); ?></p> 

Die aufgerufene PHP-Funktion fügt nicht nur das ausgewählte Motto sondern auch eine JavaScript-Methode in die erzeugte HTML ein. Diese Methode ersetzt den Seitentitel, falls er dem Blog-Titel Do-FOSS - Dortmund braucht Freie Software entspricht, durch das ausgewählte Motto. Diese Fallunterscheidung ist nötig, damit in den anderen Fällen der Titel erhalten bleibt (z.B. der Titel eines Artikels auf einer Artikelseite).

/* functions.php */

function dofoss_description() {
    $random_motto = get_random_dofoss_motto();
    $set_motto_in_title = set_motto_in_document_title($random_motto);

    echo $random_motto . $set_motto_in_title;
}

function get_random_dofoss_motto() {
    $mottos = get_dofoss_mottos();
    $motto_count = count($mottos);
    $random_index = rand(1,6);
    return $mottos[$random_index];
}

function get_dofoss_mottos() {
    return array(
        1 => "Dortmund braucht Freie Software",
        2 => "Synergie braucht Freie Software",
        3 => "Vertrauen braucht Freie Software",
        4 => "Selbstbestimmung braucht Freie Software",
        5 => "Wettbewerb braucht Freie Software",
        6 => "Transparenz braucht Freie Software",
    );
}

function set_motto_in_document_title($motto) {
    return '<script>
            if (document.title === "Do-FOSS - Dortmund braucht Freie Software") {
                document.title = "Do-FOSS - ' . $motto . '";
            }
        </script>';
}

Banner

Damit sich das Banner besser in das Layout einfügt, wurden einige kleine Änderungen vorgenommen:
  • der Abstand zwischen dem Banner und dem darunter folgenden "Titelstreifen" (das Ding, in dem z.B. "Willkommen" steht) wurde entfernt
  • das Bild wurde etwas nach oben versetzt, damit der weiße Menüstreifen nicht so groß wirkt - dadurch ragt der Florian leicht dort hinein
  • damit der Florian nicht auch bei schmaler Auflösung in den grauen Menüstreifen ragt, wurde dafür der Abstand vergrößert
/* style.css */

.header-image img {
    margin-bottom: -9px;
    margin-top: -30px;
}

.menu-toggle {
    margin-bottom: 40px;
}

Willkommenstext

Auf der Startseite werden ein Willkommenstext sowie die letzten Posts angezeigt. Dazu mussten einige Änderungen vorgenommen werden. Dazu wurde die Datei front-page.php erstellt, die von WordPress zur Darstellung der Startseite verwendet wird, wenn sie vorhanden ist. Im Standard-Theme existiert sie nicht. Statt dessen wurde die index.php als Vorlage verwendet.

Im Header wurde eine h1-Überschrift hinterlegt:

/* front-page.php */

<header class="entry-header">
    <div class="title-container">
        <h1 class="page-title">Willkommen!</h1>
    </div>
</header><!-- .entry-header -->

Vor der Darstellung der Posts wurde ein Aufruf zum Einfügen des Willkommenstextes eingefügt:

/* front-page.php */

<div class="welcome-text">
    <?php get_welcome_text(); ?>
</div>

Die aufgerufene Methode ist folgendermaßen definiert:

/* functions.php */

function get_welcome_text() {
    echo '
        /* WELCOME TEXT (with all the usual HTML tags) */
    ';
}

Der im div angewandte Stil welcome-text:

/* style.css */

.welcome-text {
    border-bottom: 1px solid;
    font-size: 110%;
    margin-bottom: 20px;
}

Suche

Das Suchfeld oben rechts hat ursprünglich nicht die gesamte Breite der Spalte gefüllt. Das wurde angepasst.

/* style.css */

#searchform #s {
    box-sizing: border-box;
    width: 100%;
}

Links zum Folgen

Die rechts im Menü angezeigten Links zum Folgen sind per CSS-Links realisiert.

Das Text-Widget enthält folgenden HTML-Code:

<a class="link-twitter" href ="https://twitter.com/do_foss" title="Twitter" target="_blank">Twitter</a>
<a class="link-rss" href ="http://blog.do-foss.de/feed/" title="RSS Feed">RSS</a>
<a class="link-newsletter" href ="http://blog.do-foss.de/do-foss/newsletter/newsletter-verwaltung/" title="Newsletter">Newsletter</a>
<a class="link-openoffices" href ="http://blog.do-foss.de/do-foss/open-offices/" title="Open Offices">Open Offices</a>
<a class="link-redmine" href ="https://orga.do-foss.de/projects/do-foss/wiki" title="Redmine" target="_blank">Redmine</a>

Die Links werden per CSS durch die Icons ersetzt:

/* style.css */

.link-newsletter, .link-rss, .link-twitter, .link-openoffices, .link-redmine {
    background-size: 35px 35px;
    width: 35px;
    height: 35px;
    display: block;
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.link-newsletter {
    background-image: url(http://blog.do-foss.de/wp-content/uploads/newsletter_dark.png);
}
.link-newsletter:hover {
    background-image: url(http://blog.do-foss.de/wp-content/uploads/newsletter_red.png);
}

.link-rss {
    background-image: url(http://blog.do-foss.de/wp-content/uploads/rss_dark.png);
}
.link-rss:hover {
    background-image: url(http://blog.do-foss.de/wp-content/uploads/rss_red.png);
}

.link-twitter {
    background-image: url(http://blog.do-foss.de/wp-content/uploads/twitter_dark.png);
}
.link-twitter:hover {
    background-image: url(http://blog.do-foss.de/wp-content/uploads/twitter_red.png);
}

.link-openoffices {
    background-image: url(http://blog.do-foss.de/wp-content/uploads/openoffices_dark.png);
}
.link-openoffices:hover {
    background-image: url(http://blog.do-foss.de/wp-content/uploads/openoffices_red.png);
}

.link-redmine {
    background-image: url(http://blog.do-foss.de/wp-content/uploads/redmine_dark.png);
}
.link-redmine:hover {
    background-image: url(http://blog.do-foss.de/wp-content/uploads/redmine_red.png);
}

Um ein Flackern der Icons beim ersten Hovern zu verhindern, weisen wir den Browser an, die Hover-Versionen zu prefetchen:

<!-- header.php, direkt nach den <meta>-Tags -->

<!--[prefetching]-->
<link rel="prefetch" href="/wp-content/uploads/twitter_red.png">
<link rel="prefetch" href="/wp-content/uploads/rss_red.png">
<link rel="prefetch" href="/wp-content/uploads/newsletter_red.png">
<link rel="prefetch" href="/wp-content/uploads/openoffices_red.png">
<link rel="prefetch" href="/wp-content/uploads/redmine_red.png">
<!--[endprefetching]-->

Archive

Ein Archiv enthält z.B. alle Posts einer Kategorie, eines Schlagworts oder eines Autors. Die Darstellung ist in verschiedener Hinsicht mangelhaft und wurde deswegen angepasst.

Die im Original-Theme enthaltene archive.php stellt alle Archive dar. Sie musste im Child Theme verändert werden (d.h. der Großteil der Datei stammt aus dem Original-Theme). Änderungen wurden am Ende des page-title und zu Beginn der section/div primary/content durchgeführt.

Kategorien & Schlagwörter

Die Beschreibungen für Kategorien und Schlagwörter wurden ursprünglich im Seitentitel, also am Ende der h1 class page-title, angezeigt. Weil das sehr ungewöhnlich aussieht, wurden sie vor die Liste der Posts verschoben:

/* archive.php */

if ( is_category() ) {
    // show an optional category description
    $category_description = category_description();
    if ( ! empty( $category_description ) ) {
        echo apply_filters( 'category_archive_meta', '<div class="taxonomy-description">' . $category_description . '</div>' );
    }
} elseif ( is_tag() ) {
    // show an optional tag description
    $tag_description = tag_description();
    if ( ! empty( $tag_description ) ) {
        echo apply_filters( 'tag_archive_meta', '<div class="taxonomy-description">' . $tag_description . '</div>' );
    }
}

Autoren

Bei Autorenarchiven wird über der Liste der Posts die Beschreibung des Autors angezeigt:

/* archive.php */

if ( ... ) {
    // code from above
} elseif ( is_author() ) {
    // because headers and paragraphs are allowed, there is no need to replace new lines with line breaks;
    // hence the typical call to 'nl2br' is missing
    $author_description = get_the_author_meta("description");
    if ( ! empty( $author_description ) )
        echo $author_description;
}

Weiterlesen

Außerdem wurde der Weiterlesen-Knopf verändert. Unter anderem musste dessen Schriftfarbe geändert werden, weil es sonst die neue Füllfarbe des Buttons ist.

/* style.css */

.hentry {
    border-bottom: 0 none;
}

.more-link {
    margin-top: 0px;
    padding: 6px 20px;
}

a.more-link:link {
    color: #fff;
}

Inhalt

Überschriften

Die Größen der Überschriften passen nicht gut zusammen. Sie wurden angepasst. Außerdem musste auch für die Archive noch der graue Balken, in dem der Titel steht, definiert werden.

/* style.css */

.page-title {
    font-size: 2.4rem;
    padding: 12px 0px;
}

body.search .page-title, body.archive .page-title {
    font-size: 2.4rem;
    padding: 12px 0px;
}

.page-header {
    min-height: 70px;
}

.entry-title {
    font-size: 1.8rem;
}

.content-area h2 {
    font-size: 2.0rem;
}

Absätze

Die Abstände zwischen Absätzen sind mit 1.5em etwas lang. Das wurde reduziert.

/* style.css */

p {
    margin-bottom: 1.0em;
}

Passend dazu wurden auch andere untere Abstände (z.B. bei Listen) auf den gleichen Wert gesetzt.

Links

Links sind in Formation standardmäßig grau, was für die Menüs angemessen ist, ihre Sichtbarkeit in Texten aber stark reduziert. Auch hier wird statt dessen das übliche Rot verwendet.

/* style.css */

.content-area a:link {
    color: #d40000;
}

.content-area a:visited {
    color: #9d3131;
}

.content-area a:active {
    /* links in the content area should never be active */
}

.content-area a:hover {
    color: #d40000;
}

Listen

Die Gestaltung der Listen wurden angepasst.

/* style.css */

ul, ol, dl {
    margin-bottom: 1.0em;
}

.entry-content ul li,
.content-profile ul li {
    list-style-type: disc;
}

.entry-content ol li,
.content-profile ol li  {
    list-style-type: upper-roman;
}

dt, dd {
    margin-left: 1.5em;
}

Quellenangaben und Lizenzhinweise

Um Quellenangaben und Lizenzhinweise optisch abzuheben, wurde die Style Classes credits und license definiert. Diese hinterlegen die jeweiligen Inhalte mit einem grauen Balken, der jenem des Theme unter dem Header-Bild ähnelt. Zusätzlich wurden Abstände und Schriftgröße angepasst.

/* style.css */

.credits {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-top: 1px solid rgb(225,225,225);
    border-bottom: 1px solid rgb(225,225,225);
    background-color: rgb(239,239,239);

    font-size: 80%;
}

.license {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-top: 1px solid rgb(225,225,225);
    border-bottom: 1px solid rgb(225,225,225);
    background-color: rgb(239,239,239);

    padding-top: 0.5em;
    text-align: center;
    font-size: 80%;
}

Kommentare

Hinweise

Vor der Eingabemaske für Kommentare sollen einige Hinweise erscheinen. Dazu wurde der Hook comment_form_before verwendet.

/* functions.php. */

function notes_before_comment_form() {
    echo '<h3>ÜBERSCHRIFT</h3><div class="comments-guideline">HINWEISE</div>';
}
add_action( 'comment_form_before', 'notes_before_comment_form' );

Der dort verwendete Stil reduziert die Schriftgröße.

/* style.css */

.comments-guideline {
    font-size: 80%;
}

Antworten

Der Antwortknopf enthielt ursprünglich das Wort Reply und war zu kurz für die Deutsche Übersetzung. Er wurde dementsprechend vergrößert.

/* style.css */

.reply {
    background-color:  #d40000;
    width: 60px;
}

.reply a:link {
    color: #fff;
}

.reply:hover {
    background-color: #222;
}

Cookies

WordPress legt bei Kommentatoren standardmäßig Cookies ab, die deren eingegebenen Namen und E-Mail-Adresse enthalten. Dieses Feature wurde deaktiviert, um weniger Cookies abzuspeichern. Der Code dazu stammt vom WordPress StackExchange.

/* functions.php */

remove_action( 'set_comment_cookies', 'wp_set_comment_cookies' );

Sonstiges

HTML-Tags

Sowohl in den Profilen der WordPress-Nutzer als auch in den Kommentaren können HTML-Tags verwendet werden. Allerdings werden (beim Speichern) die meisten entfernt, um Missbrauch vorzubeugen. Dabei wird das Array $allowedtags aus wp-includes/kses.php als Filter angewandt, wobei alle darin enthaltenen Elemente nicht entfernt werden, also das Filtern überstehen.

Um die Autorenprofile wie die Seiten zu Mitgliedern gestalten zu können, wurden einige Tags erlaubt.

/* functions.php */

/* header */
$allowedtags["h2"]["align"] = true;
$allowedtags["h3"]["align"] = true;
$allowedtags["h4"]["align"] = true;
$allowedtags["h5"]["align"] = true;
$allowedtags["h6"]["align"] = true;
/* paragraph */
$allowedtags["p"]["align"] = true;
$allowedtags["p"]["dir"] = true;
$allowedtags["p"]["lang"] = true;
/* lists */
$allowedtags["ul"] = array(true);
$allowedtags["ol"]["reversed"] = true;
$allowedtags["ol"]["start"] = true;
$allowedtags["ol"]["type"] = true;
$allowedtags["li"]["value"] = true;

style.css Magnifier - style.css für das Formation Child Theme (1,99 KB) Nicolai Parlog, 01.04.2014 13:01

redmine.php Magnifier - Site Template für die Seite, die Redmine enthält (536 Bytes) Nicolai Parlog, 01.04.2014 13:01

archive.php Magnifier (3,62 KB) Nicolai Parlog, 01.04.2014 21:26

Auch abrufbar als: PDF HTML TXT

Bild aus Zwischenablage einfügen (Maximale Größe: 300 MB)