Heute wollen wir den Besuchern der Seiten, die das schöne Foto-Theme Renkon von Elmastudio einsetzen, das Leben etwas erleichtern und ihnen jeden Klick in das Overlay der Beitragsbilder mit der Weiterleitung zur Beitragsseite vergüten.

Dazu verwenden wir ein Child-Theme für Renkon. Mehr über die Einrichtung erfahrt ihr hier, den vorbereiteten Child-Theme-Ordner bekommt ihr hier.

Anpassungen müssen wir nur an der content.php vornehmen, die wir dazu in den Child-Theme-Ordner kopieren. Die folgenden Anpassungen können vor der Installation vorgenommen werden. Natürlich könnt ihr die Datei auch in den Child-Theme-Ordner einer bestehenden Child-Theme-Installation mit Hilfe eines FTP-Programms hochladen.

Einfassen des Overlays in einen Link

Unsere Änderungen beziehen sich auf den oberen Teil der content.php, ihr solltet direkt den folgenden Bereich ausfindig machen können.


<div class="overlay">

...

</div><!-- end .overlay -->

Diesen umklammern wir mit einem Link zum eigentlichen Beitrag, welcher mit der WordPress-Funktion the_permalink() erzeugt wird. Wir erweitern den Code-Block daher mit jeweils einer Zeile am Anfang und am Ende wie folgt.


<a href="<?php the_permalink(); ?>">
<div class="overlay">

...

</div><!-- end .overlay -->
</a>

Wichtig! Entfernen weiterer Links

Nun müssen wir die innen-liegenden Links jedoch entfernen. Dazu halten wir Ausschau nach A-Tags in folgender Form und entfernen nur die Tags (von einer spitzen Klammer bis zur nächsten).


<a href="...>

...

</a>

Von diesen offensichtlichen Links gibt es drei oder vier. Die weniger offensichtlichen behandeln wir im nächsten Abschnitt.

Link zu den Kommentaren

Da das gesamte Overlay nun zum Artikel linken soll, müssen wir den Link – genauer gesagt den A-Tag – zu den Kommentaren entfernen. Dazu passen wir einfach die folgende Funktion an:


comments_popup_link(...)

Ein simples Abändern in die nachfolgende Funktion macht aus dem Link eine einfache Anzeige der Kommentare ohne unserem Overlay-Link in die Quere zu kommen.


comments_number(...)

Link zum Bearbeiten des Beitrags

Auch dieser Link, der nur angezeigt wird wenn wir eingeloggt sind, sollte entfernt werden. Man möchte die Seite schließlich auch funktionsfähig wissen, wenn man selbst oder andere im Backend eingeloggt ist.

Dazu entfernen wir einfach die komplette Zeile, die wie folgt beginnt:


<?php edit_post_link(...

Kleine CSS-Anpassung

Leider verdunkelt sich nach den Änderungen der Titel der Beiträge, da dies nun kein Link mehr ist. Mit diesem Stückchen CSS-Code beheben wir das Problem jedoch sehr schnell:


.overlay .entry-header h2.entry-title {
color: #fff;
}

Wie wir den Code eingebaut bekommen lässt sich hier sehr schön nachlesen.

Child-Theme installieren

Wieder eingepackt, als ZIP-Datei, lässt sich das Child-Theme dann wie gewohnt installieren und aktivieren und von nun an darf der Besucher die gesamte Overlay-Fläche zum Anklicken verwenden.