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.

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).

<code class="php">
/* 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>';
}
</code>

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:

<code class="php">
/* functions.php */

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

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 ="/feed/" title="RSS Feed">RSS</a>
<a class="link-newsletter" href ="/do-foss/newsletter/newsletter-verwaltung/" title="Newsletter">Newsletter</a>
<a class="link-openoffices" href ="/do-foss/open-offices/" title="Open Offices">Open Offices</a>
<a class="link-openproject" href ="https://projekt.do-foss.de/projects/do-foss/wiki/wiki" title="OpenProject" target="_blank">OpenProject</a>

Die Links werden per CSS durch die Icons ersetzt:

/* style.css */

.link-newsletter, .link-rss, .link-twitter, .link-openoffices, .link-openproject {
    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(/wp-content/uploads/newsletter_dark.png);
}
.link-newsletter:hover {
    background-image: url(/wp-content/uploads/newsletter_red.png);
}

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

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

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

.link-openproject {
    background-image: url(/wp-content/uploads/openproject_dark.png);
}
.link-openproject:hover {
    background-image: url(/wp-content/uploads/openproject_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/openproject_red.png">
<!--[endprefetching]-->

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.

<code class="css">
/* 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;
}

</code>

Absätze

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

<code class="css">
/* style.css */

p {
    margin-bottom: 1.0em;
}
</code>

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.

<code class="css">
/* 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;
}
</code>

Listen

Die Gestaltung der Listen wurden angepasst.

<code class="css">
/* 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;
}
</code>

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.

<code class="css">
/* 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%;
}
</code>

Kommentare

Hinweise

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

<code class="php">
/* 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' );
</code>

Der dort verwendete Stil reduziert die Schriftgröße.

<code class="css">
/* style.css */

.comments-guideline {
    font-size: 80%;
}
</code>

Antworten

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

<code class="css">
/* style.css */

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

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

.reply:hover {
    background-color: #222;
}
</code>

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.

<code class="php">
/* functions.php */

remove_action( 'set_comment_cookies', 'wp_set_comment_cookies' );
</code>

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.

<code class="php">
/* 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;
</code>

Hauptmenü

Nebenmenü

Inhalt

Theme

Gesamteindruck

Hauptfarbe

Link zur Englischen Version in Topbar

Logo und Seitentitel im Header

Wechselndes Motto im Header

Banner

Willkommenstext

Suche

Links zum Folgen

Archive

Kategorien & Schlagwörter

Autoren

Weiterlesen

Inhalt

Überschriften

Absätze

Links

Listen

Quellenangaben und Lizenzhinweise

Kommentare

Hinweise

Antworten

Cookies

Sonstiges

HTML-Tags

Nebenmenü

Inhalt

Blog-Theme

Theme

Gesamteindruck

Hauptfarbe

Link zur Englischen Version in Topbar

Logo und Seitentitel im Header

Wechselndes Motto im Header

Banner

Willkommenstext

Suche

Links zum Folgen

Archive

Kategorien & Schlagwörter

Autoren

Weiterlesen

Inhalt

Überschriften

Absätze

Links

Listen

Quellenangaben und Lizenzhinweise

Kommentare

Hinweise

Antworten

Cookies

Sonstiges

HTML-Tags