Wordpress
Kommentare 9

Renkon – Komplettes Overlay anklickbar

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.

9 Kommentare

  1. Any chance to get this in english?
    Iv been trying to make the whole thumbnail clickable following this post but was not able to.
    I have a child theme and created a duplicate of content.php, but adding <a href="“> before line 16 and closing the tag after doesn’t work. Any suggestions?

    • Marc sagt

      Since the solution isn’t the most elegant way, you need to remove the links (a-tags) inside the newly added a-tag.

  2. hannes sagt

    Hallo Marc,
    ich mache irgendeinen Fehler beim a-Tag löschen,ich versteh nicht ganz, welchen Teil man löschen soll – du schreibst man solle „nur die Tags [löschen] (von einer spitzen Klammer bis zur nächsten)“..
    Ich bin mir unsicher, wo der a-Tag anfängt und wo er aufhört, welche beiden spitzen Klammern genau gemeint sind.

    Zum Beispiel, einer der Links, die in der ursprünglichen funktions.php zu finden sind lautet:
    <a href="“ title=““ rel=“bookmark“>

    Die Zeile soll man ja abändern, den a-Tag entfernen. Was steht am Ende dann da ,wenn man die Tags entfernt hat?
    Das hier?
    “ title=““ rel=“bookmark“>

    also die Teile
    <a href="
    und

    gelöscht?

    Das klappt bei mir nicht. Und alle anderen Versuche, mal mehr, mal weniger zu löschen fruchten auch nicht…
    was mach ich falsch? kannst du mir es an dieser einen Zeile illustrieren??
    Danke im Voraus!

    • Marc sagt

      Hallo Hannes,

      bitte verwende für HTML-Code in deinen Kommentaren den folgenden Shortcode:

      [html]Dein Code hier…[/html]

      Hier ein kurzes Beispiel, welches demonstrieren sollte, was genau ich gemeint habe. Die folgende Zeile würde sich wie folgt abändern:

      <a href="http://link.zu/einer-addresse" attribut="wert"><weiterer code></a>

      <weiterer code>

      Viele Grüße
      Marc

      • hannes sagt

        Hallo Marc, aha, so geht das, danke,
        hier also nochmal:


        Zum Beispiel, einer der Links, die in der ursprünglichen funktions.php zu finden sind lautet:

        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'renkon' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>

        Die Zeile soll man ja abändern, den a-Tag entfernen. Was steht am Ende dann da ,wenn man die Tags entfernt hat?
        Das hier?

        " title="<?php printf( esc_attr__( 'Permalink to %s', 'renkon' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?>

        also die Teile

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

        und

        </a>

        gelöscht?

        danke nochmal im Voraus!

        • hannes sagt

          ich weiß nicht, ob ich mich hier so gut ausdrücke.. alternativ würde mir auch sehr helfen, wenn du den neuen Teil, der zwischen

          <div class="overlay">

          bis

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

          steht, hier reinkopierst… ist vielleicht auch für dich am schnellsten?
          viele Grüße

          • Marc sagt

            Hallo Hannes,

            bitte Verzeih, dass ich die Schwierigkeit dabei nicht selbst erkannt habe. Daher möchte ich dir kurz erläutern, worauf du genau achten musst. Wenn ein Tag mit einer spitzen Klammer geöffnet wird und weitere öffnende Klammern (wie im obigen Beispiel mit ergänzendem PHP-Code) auftauchen, müssen diese erst wieder geschlossen worden sein, bevor das Ende des eigentlichen Tags im Code auftaucht.

            Dein Beispiel, welches wie folgt aussah:

            <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'renkon' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>

            Wird also zu:

            <?php the_title(); ?>

            Das lässt sich z. B. so zählen:
            Wir beginnen bei „null“. Klammer auf bedeutet „plus eins“, Klammer zu „minus eins“ und wenn du bei „null“ wieder angekommen bist, ist der Tag beendet.

            Viele Grüße
            Marc

  3. hannes sagt

    toll, super, so klappt es, bin begeistert!!! Hab ganz vielen Dank für die geduldige Erklärung. Deine Ergänzung rundet das tolle Renkon-Theme sehr schön ab!

    Ein Hinweis: Die neue Funktionalität klappt allerdings nur bei Blog-Beiträgen, die auf ‚Standard‘ stehen – nicht hingegen bei Beiträgen, die auf ‚Bild‘ oder ‚Galerie‘ stehen. Da meine Beiträge ohnehin alle auf Standard stehen, ist das für mich nicht schlimm – ist mir nur aufgefallen.
    Viele Grüße
    Hannes

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.