How-To Rezensionsindex Part II:
Automatisierter Index – Die Basics

DISCLAIMER: Ich habe keine Ahnung von Webdesign, Programmieren und Co. Alles, was ich habe, ist ein bisschen Übung darin, mit Hilfe von Google und Stackoverflow das zusammen zu basteln, was ich gern auf meiner Website hätte. Vermutlich (sicherlich) geht das in 9 von 10 Fällen einfacher und besser und ich übernehme daher auch absolut keine Garantie für irgendwas von dem, was hier steht!

Willkommen zurück zum zweiten Teil von „How-To Rezensionsindex“! Nachdem der erste Teil zur klickbaren Alphabet-Übersicht ja doch sehr gut angekommen ist, geht es heute darum, den Rezensionsindex zu automatisieren, sodass man neue Beiträge nicht mehr von Hand eintragen muss. Leider kann ich euch diese Anleitung nur für selbstgehostete WordPress-Seiten zur Verfügung stellen, denn a) glaube ich nicht, dass es auf WP.com oder Blogger-Blogs überhaupt geht, und b) selbst wenn es doch gehen sollte, kenne ich mich damit einfach nicht genug aus.

Theoretisch braucht ihr auch für diese Geschichte keine weiteren Programme, es ist aber – meiner Meinung nach – einfacher und sicherer, wenn ihr einen FTP-Client (ich nutze z.B. FileZilla) benutzt und ein Editor-Programm, das php-Dateien vernünftig darstellen kann (z.B. Notepad++). Außerdem braucht ihr euer FTP-Login – falls ihr nicht wissen solltet, wo ihr das bei eurem Anbieter findet, hilft eine schnelle Google-Suche. Und ihr müsst wissen, wie euer Theme heißt, sonst wird es schwierig, gerade wenn ihr mehrere installiert habt.

Vorab was zur Sicherheit

Der folgende Abschnitt ist nicht notwendig, aber meiner Meinung nach sinnvoll, denn man brauch sich nur einmal blöd zu verklicken und schon hat man den Salat und das Theme ist weg oder kaputt oder, wenn man ganz viel Pech hat, schafft man es sogar die Datenbank des Blogs zu schrotten, deshalb lieber auf Nummer sicher gehen:

Wenn ihr alle nötigen Programme und Daten habt, solltet ihr sicherheitshalber zuerst ein Backup erstellen – das solltet ihr eigentlich eh regelmäßig tun, es gibt auch Plugins, die das voll automatisch machen und einem einmal die Woche (oder wie oft man auch immer will) das Datenbank-Backup per Mail schicken. Dann logt ihr euch über den FTP-Client ein und sucht euren Theme-Ordner – der Pfad dafür sollte ungefähr so heißen: [Name eurer Website]/wp-content/themes. In dem Ordner findet ihr jetzt alle Themes, die auf eurem Blog installiert sind. Sucht den Ordner für das Theme, das ihr aktiviert habt, und ladet sicherheitshalber einmal den kompletten Ordner runter und speichert ihn irgendwo, wo ihr ihn auch wieder findet.

Und jetzt kann es mit der eigentlichen Arbeit losgehen!

Ein neues Page Template erstellen

Für den Rezensionsindex erstellen wir ein neues Page Template, eine Seitenvorlage, die ihr dann ganz einfach im WordPress-Backend für den Rezensionsindex aktivieren könnt. Dafür öffnet ihr in Notepad (oder dem Editor eurer Wahl) eine neue Datei und gebt als erstes folgende Zeile ein:

<?php /* Template Name: Rezensionsindex */ ?>

Natürlich könnt ihr dem Template auch einen anderen Namen geben, Hauptsache ihr wisst nachher noch welchen und erkennt den Namen wieder. Die Datei speichert ihr dann auch direkt – und zwar als .php-Datei. Auch hier gilt: Es ist herzlich egal, wie ihr die Datei nennt, nur die Endung ist wichtig, aber es macht natürlich Sinn einen Namen zu verwenden, der euch direkt sagt, was in der Datei drinsteckt – sowas wie „reziindex-template.php“. Diese Datei ladet ihr jetzt mit eurem FTP-Client in euren Theme Ordner hoch.

Wenn ihr jetzt im WordPress-Backend eine neue Seite erstellt, solltet ihr rechts unter „Seiten-Attribute“ ein Dropdown-Menü haben, in dem ihr ein Template für eure Seite auswählen könnt – da sollte jetzt auch euer neues Template „Rezensionsindex“ auftauchen. Wenn der Kasten „Seiten-Attribute“ bei euch nicht vorhanden ist, müsst ihr ihn womöglich oben rechts unter „Ansicht anpassen“ erst noch aktivieren. Wenn das Template nicht auftaucht, habt ihr entweder die Code-Zeile falsch oder die Datei nicht im richtigen Ordner hochgeladen – sie muss in den Ordner eures aktiven Themes!

Das Page Template gestalten

Wenn ihr alles richtig gemacht habt und auf „Vorschau“ klickt, dann seht ihr jetzt … gar nichts! Das ist völlig okay so, immerhin ist das Page Template ja bis auf den Namen auch noch komplett leer. Das wollen wir jetzt ändern und dafür ist es am sinnvollsten, wenn wir euch zuerst die page.php-Datei eures Themes runterladet – ganz einfach eben über euren FTP-Client, ihr seid ja schon verbunden und im richtigen Ordner, die Datei sollte also ganz einfach zu finden sein.

Wenn ihr die Datei öffnet, werdet ihr sehen, dass sie ungefähr so anfängt:

<?php [mehr oder wenig viel Text] get_header(); ?>

Die ersten Zeilen mit all dem Text brauchen wir nicht, aber alles ab „get_header();“ – also markiert den Text und kopiert ihn in eure Template-Datei – fügt vor dem „get_header();“ noch ein „<?php “ ein und eure Datei sollte dann so oder so ähnlich aussehen:

<?php /* Template Name: Rezensionsindex */ ?>

<?php get_header(); ?>


<div id="primary" class="content-area">

<main id="main" class="site-main">

<?php while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content', 'page' ); if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; // End of the loop. ?>

</main><!-- #main -->

</div>


<!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Wenn eure Datei länger ist und statt des „get_template“-Parts so Dinge wie „the_title“, „the_content“ und Co. enthält, ist alles okay und ihr könnt den nächsten Abschnitt überspringen. Wenn nicht, dann müsst ihr jetzt den „get_template_part“ Befehl und das Zeug zu den Kommentaren löschen und die php-Tags davor und danach schließen, sodass dazwischen eine Leerzeile steht:

<main id="main" class="site-main">

<?php while ( have_posts() ) : the_post(); ?>



<?php endwhile; // End of the loop. ?>

</main><!-- #main -->

Nun müsst ihr die entsprechende Content-Datei finden, in diesem Fall wäre das content-page.php im Unterordner „template-parts“. Die Datei ladet ihr über euren FTP Client runter und öffnet sie im Editor. Zu Beginn der Datei sollte ein php-Tag mit normalem Text stehen, das braucht ihr nicht, aber alles, was danach kommt: Markiert und kopiert den Rest der Datei und fügt ihn in die Leerzeile ein, die ihr gerade in eurem Page Template geschaffen habt.

Wenn ihr die Datei jetzt wieder über euren FTP-Client hochladet und euch die Seite, die ihr vorhin mit dem Template erstellt habt, schaut, dann wird diese jetzt genau so aussehen, wie jede andere Seite auch. Und das bedeutet, wir können jetzt mit der eigentlichen Arbeit anfangen und den Code für den automatisierten Rezensionsindex erstellen! Okay, eigentlich ist das gar keine Arbeit mehr, das Schlimmste habt ihr bereits geschafft, jetzt müsst ihr noch ein paar Zeilen löschen und dann kommt nur noch simples Copy&Paste 😉

(Hoffentlich) Unnützen Inhalt entfernen

Irgendwo in eurer Datei sollte jetzt „the_content()“ innerhalb einiger div-Tags stehen stehen – wichtig ist das div-Tag, das am nächsten dran ist. Bei mir sieht das so aus, bei euch könnte es auch etwas anders aussehen, sollte aber erkennbar sein:

<div class="entry-content">

<?php the_content(); wp_link_pages( array( 'before' => '
<div class="page-links">' . esc_html__( 'Pages:', 'random_theme' ),
'after'  => '</div>

',
) );
?>

</div>

<!-- .entry-content -->

Falls in eurer Datei hier auch so etwas wie „wp_link_pages“ steht, könnt ihr das löschen. Stattdessen wird jetzt direkt nach „the_content();“ ein „endwhile;“ eingefügt:

<div class="entry-content">

<?php the_content(); endwhile; ?>

</div>

<!-- .entry-content -->

Irgendwo weiter unten in eurer Datei sollte auch nochmal „endwhile“ stehen – die Zeile könnt ihr jetzt komplett löschen. Außerdem müsst ihr schauen, ob hinter dem „endwhile“, das ihr gerade eingefügt habt, noch irgendwo „if“ steht. Falls ja, dann müsst ihr alles von diesem „if“ bis zu dem dazugehörigen „endif“ ebenfalls löschen.

Bei mir sieht die komplette Datei jetzt so aus und wenn ich sie hochlade und teste, dann sieht das weitestgehend wie eine normale Seite aus, nur ohne das Kommentarformular und den „Bearbeiten“-Link:

<?php /* Template Name: Rezensionsindex */ ?>

<?php get_header(); ?>


<div id="primary" class="content-area">

<main id="main" class="site-main">

<?php while ( have_posts() ) : the_post(); ?>
				

<article id="post-<?php the_ID(); ?"> <?php post_class(); ?>>

<div class="entry-total">


<header class="entry-header">
<?php the_title( '
<h1 class="entry-title">', '</h1>

' ); ?>
</header>

<!-- .entry-header -->


<div class="entry-content">

<?php the_content(); endwhile; ?>

</div>

<!-- .entry-content -->

</div>

</article>

<!-- #post-<?php the_ID(); ?> -->

</main><!-- #main -->

</div>


<!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Endlich: Der Index!

Okay, last but not least! Unter dem php-Tag mit „the_content“ und „endwhile“ aber vor dem schließenden div-Tag wird jetzt der Code für den Index eingefügt:

<?php $my_query = new WP_Query( array( 'category_name' => 'rezensionen',
'posts_per_page' => -1
) );
while ( $my_query->have_posts() ) : $my_query->the_post(); { ?>								  

<li><a href="<?php echo esc_url( get_permalink() ); ?>"><?php the_title(); ?></a></li>

<?php } endwhile; ?>

Den „category_name“ müsst ihr natürlich anpassen, wenn die Kategorie, in der ihr eure Rezensionen sammelt, anders heißt. Joar, und dann sollte eure Datei ungefähr so wie im nächsten Codeabschnitt aussehen und wir sind damit fertig! Also nicht fertig fertig, denn wenn ihr die Datei jetzt hochladet und euch eure Testseite anschaut, solltet ihr zwar eine Liste sehen, aber noch dürfte die nicht allzu hübsch sein – wie ihr die Liste sortiert und statt der Beitragstitel Autor und Titel der jeweiligen Bücher anzeigen könnt, zeige ich euch nächste Woche!

<?php /* Template Name: Rezensionsindex */ ?>

<?php get_header(); ?>


<div id="primary" class="content-area">

<main id="main" class="site-main">

<?php while ( have_posts() ) : the_post(); ?>
				

<article id="post-<?php the_ID(); ?"> <?php post_class(); ?>>

<div class="entry-total">


<header class="entry-header">
<?php the_title( '
<h1 class="entry-title">', '</h1>

' ); ?>
</header>

<!-- .entry-header -->


<div class="entry-content">

<?php the_content(); endwhile; ?>

<?php $my_query = new WP_Query( array( 'category_name' => 'rezensionen',
'posts_per_page' => -1
) );
while ( $my_query->have_posts() ) : $my_query->the_post(); { ?>								  

<li><a href="<?php echo esc_url( get_permalink() ); ?>"><?php the_title(); ?></a></li>

<?php } endwhile; ?>

</div>

<!-- .entry-content -->

</div>

</article>

<!-- #post-<?php the_ID(); ?> -->

</main><!-- #main -->

</div>


<!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Das war’s mit Part II! Weil ich den Artikel nicht zu lang machen wollte und er ja leider sehr viel „Vorarbeit“ enthält, wird es noch zwei weitere Teile geben: In Part III werde ich euch wie gesagt zeigen, wie ihr die Beiträge mit ein bisschen Extra-Code & Zusatz-Infos ganz einfach sinnvoller (also nach Autor, Titel, etc.) sortieren und hübscher darstellen könnt und in Part IV geht es dann noch darum, die Beiträge nach Buchstaben getrennt abzurufen, sodass man auch das klickbare Alphabet aus Part I integrieren kann. Und eventuell gibt es dann zum Schluss noch einen Part V, für alle, die gerne auch eine Coverwall hätten.

Oh, und falls mir jemand von euch ein gutes, kostenloses Programm empfehlen kann, mit dem man den Bildschirm aufnehmen kann, dann gibt es die ganze Geschichte demnächst vielleicht auch noch als Video … Vielleicht!

How-To Rezensionsindex

6

2 Kommentare zu “How-To Rezensionsindex Part II:
Automatisierter Index – Die Basics

  1. Hallo Rike,
    danke für das Tutorial! Beim ersten Versuch hat es leider noch nicht geklappt, aber als ich beim zweiten Mal den Schritt „(Hoffentlich) Unnützen Inhalt entfernen“ weggelassen habe, funktionierte es 😀 Vielleicht habe ich da vorher einen Fehler eingebaut, aber so funktioniert es erst einmal. Ich bin schon auf die weiteren Teile gespannt!
    Liebe Grüße
    Fraencis

    1. Jaaa, ich hab mir fast gedacht, dass sowas passieren könnte, deshalb das „hoffentlich“ davor 😅 Ist halt doof, weil man immer nur vom Standard ausgehen kann und wenn ein Design dann irgendwo davon abweicht, wird es schwierig. Aber freut mich sehr, dass es doch noch geklappt hat und sieht ja jetzt auch wirklich gut aus!

      Liebe Grüße
      Rike

Schreibe einen Kommentar

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