Abou Chleih

{the magic lies between the brackets}

Menü Schließen

Schlagwort: javascript

[WordPress] Integrieren des WordPress-Blog in die eigene Homepage #2 Suchfunktion

Integrierung des eigentlichen Blogs findet hier in Part1.

Nun haben wir den Blog mit all seinen Posts eingefügt. Es fehlen allerdings noch ein paar essentielle Features eines jeden Blogs.
Beispielsweise die Suchfunktion, um welche es in diesem Post gehen wird.

Um eine Suche starten zu können benötigen wir natürlich zuerst einmal ein Suchfeld.
In HTML werden Eingabefelder (Textboxen, …) mit <input …>-Tags erstellt.
In unserem Fall einem Textfeld sieht dies folgendermaßen aus:

 <input name="s" type="text" size="20" maxlength="20"> 

Der Bezeichner des Parameters ist hier „s“ (ist bei WordPress Pflicht!!), der Typ ist „text“ also Textfelder und die maximale Eingabelänge beträgt 20 Zeichen.
Nun benötigen wir noch einen Button, welcher eine Aktion (hier: die Suche) auslösen soll.
Dafür gibt es in HTML den Typ „submit“:

 <input type="submit"> 

Sobald man nun auf den Knopf drückt, passiert … nichts.
Wieso? … Man muss dem Browser noch sagen, was beim Drücken des Knopfes passieren soll, welche Aktion also ausgeführt werden soll.
In meinem Beispiel soll die search.php-Seite aufgerufen werden.

 <form action="search.php"> input tags here </form>

Nun wird beim Drücken des Buttons die search.php aufgerufen und der Parameter (hier: s), als Post-Parameter (also in der Browserleiste) übergeben.
Das Ergebnis sieht so aus:

http://www.meineDomainHier.de/search.php?s=MeinSuchtext

Nun zum eigentlichen Part, der Such-Page search.php.
Der Aufbau ähnelt sehr stark dem eigentlich Blog. Auch hier wird die Loop verwendet.

  <?php if (have_posts()) : ?>
         <p class="info">Deine Suchergebnisse f&uuml;r '<strong><?php echo $s ?></strong>'</p> <-- Deine Suchergebnisse fuer XYZ --!>
		 <br/>
         <?php while (have_posts()) : the_post(); //The Loop ?> 

In dieser Loop kann man dann wieder, wie im Blog, die einzelnen Daten, welche man benötigt abrufen.
Ich beschränke mich jetzt hier mal auf den Titel und den Inhalt bzw. eine Vorschau dessen.
Die Ausgabe erfolgt hier per PHP wie folgt:

 <?php the_title();
<?php the_excerpt(); // Vorschautext oder the_content(); ?>

Nun schließt man die while-Schleife noch:

 <? endwhile; ?> 

Sollte kein Ergebnis gefunden worden sein, so wird der else-Zweig der if-have-post-Abfrage ausgeführt:

  <?php else : ?>
         <p class="info">Leider wurde f&uuml;r den Suchbegriff '<strong><?php echo $s ?></strong>' nichts gefunden</p>
      <?php endif; ?> 

Damit ist die Suchfunktion fertig.

[WordPress] Integrieren des WordPress-Blog in die eigene Homepage #1 Einstieg + Blog-Hauptseite

Eigentlich wollte ich einen eigenen WordPress-Blog aufziehen, ähnlich diesem hier.
Doch hatte ich schon eine Homepage mit komplettem Template fertig.
So stellte sich mir die Frage, ob ich

  • einen eigenen WordPress-Theme bauen
    oder
  • WordPress in die eigene Homepage integrieren soll.

Ich entschied mich für letzteres.
Wie fängt man, aber an ein fertiges Backend in eine eigene Homepage zu integrieren?
Wie frage ich alles ab?
Man benötigt dazu die Datei wp-blog-header.php, welche sich im Stammverzeichnis des WordPress-Ordners befindet.
Die Datei lädt die ganze Umgebung, d.h. alle benötigten Funktionen, also genau das, was wir wollen.

/**
* Loads the WordPress environment and template.
*
* @package WordPress
*/

Nun lädt man die Datei via php in die eigene Seite:

 <!?php include ('meinPfad/wp-blog-header.php'); ?> 

Dies tut man am besten, der Übersichtlichkeit wegen, vor dem HTML-Tag des Dokuments:

<?php include ('wordpress/wp-blog-header.php'); ?>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title>Blog</title>...

Nun zum eigentlichen Thema, dem Anzeigen von Posts.
In WordPress gibt es die sogenannte Loop.
Diese wird genutzt, um alle Posts mit einer Loop (while-Schleife) zu bekommen. Sie ist ganz einfach und sieht wie folgt aus:

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php //TO DO HERE ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, keine Posts gefunden'); ?></p>
<?php endif; ?> 

In dieser while-Schleife können nun alle Objekte der Funktion the_post(); ausgelesen werden.
Hier sind folgende für meine Belange wichtig gewesen:

  • Die Post-ID:  the_ID();
  • Der Titel des Posts: the_title();
  • Die Kategorien mit Namen und Category-ID (später)
  • Die Tags: the_tags(…);
  • Das Datum: the_date();
  • Der Autor: the_author();
  • Der Inhalt: the_content();

Diese Funktion ruft man einfach innerhalb der Loop auf. So wird automatisch der Autor, das Datum, … des entsprechenden Post ausgelesen:

 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_ID(); ?>
<?php the_title(); ?>
<?php the_tags(__('Tags: '), ', ', ' — '); //Die Tags werden mit Komma getrennt ?>
<? the_date();?>
<?php the_author(); ?>
<?php the_content(); ?>
<?php endwhile; else: ?>
<?php _e('Sorry, bisher wurden keine Beiträge geschrieben. Nichts gefunden.'); ?>
<?php endif; ?>

Das einzige, kleine Problem, welches ich noch hatte, war das Auslesen der Kategorien mit Name.
Dies war aber im Endeffekt relativ einfach gelöst, indem man die Funktion get_the_category(); in einer foreach-Schleife ausführte und die Rückgaben ausliest und ausgibt.
Es sollte grob so aussehen (Achtung, etwas buggy mit dem Komma):

<?php _e("Kategorien: "); ?> <?php //the_category(',')
foreach((get_the_category()) as $category) {
    echo $category->cat_name . ', ';
}?>

Im Endeffekt sieht der ganze Code in etwa so aus, wenn man ein paar eigene divs mit einfließen lässt, um die Ausgabe etwas zu designen:

 <div  style="width:450px;min-height:749px;">

<?php if (have_posts()) : while (have_posts()) : the_post(); _e("<br>");?>
<div class="post" id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<div class="meta"><?php _e("Kategorien: "); ?> <?php //the_category(',')
foreach((get_the_category()) as $category) {
    echo $category->cat_name . ', ';
}?> <br/>
<?php the_tags(__('Tags: '), ', ', ' — '); ?>
<?php _e("Geschrieben am: "); ?> <? the_date(); _e("<br>");?>
<?php _e("Geschrieben von: "); ?><?php the_author(); ?>
<?php edit_post_link(__('edit')); ?>
<?php _e("<hr/>"); ?>
</div>
<div class="storycontent">
<?php the_content(__('(weiterlesen...)')); ?>
</div>
</div>

<?php endwhile; else: ?>
<p><?php _e('Sorry, bisher wurden keine Beiträge geschrieben. Nichts gefunden.'); ?></p>
<?php endif; ?>
</div> 

Der Blog ist eingebunden.
Part 2 mit Suche, Part 3 mit Archiv für Kategorien, … folgen.

© 2019 Abou Chleih. Alle Rechte vorbehalten.

Thema von Anders Norén.