Zum Inhalt springen

Google CSE in WordPress „twentyeleven“ einbauen

Wordpress

Wie der Codeschnipsel bei Google CSE erstellt wird habe ich in einem vorhergegangenen Beitrag bereits näher beschrieben, jetzt geht es um den Einbau der eigenen Suchmaschine in das Blogtheme. In meinem Fall ist das ein Child-Theme von Twentyeleven. Wer den notwendigen Codeschnipsel noch nicht hat findet soll bitte erst meine Anleitung hierzu durchlesen und dann diesem Beitrag folgen.

Vorne weg schildere ich jedoch meine Fehlversuche, die sicher dem einen oder anderen WordPressnutzer bekannt vorkommen werden, sofern er den Einbau auch schon versucht hat.

In zahlreichen Beiträgen zu diesem Thema wird beschrieben, dass in WordPress eine neue Seite (ich nenne sie hier einmal „Suchergebnisse“) angelegt werden muss, in welche dann der Codeschnipsel zur Anzeige von Google CSE eingefügt wird. Klingt grundsätzlich einleuchtend und wurde von mir auch ausgiebig getestet. Allerdings mit dem Resultat, dass bei jeder Suchabfrage zwar die Seite „Suchergebnisse“ angezeigt wurde, diese aber leer geblieben ist. Lediglich ein neues Suchformular von Google CSE wurde eingeblendet.

Sämtliche Parameter einer Suche (z.B.  /?q=Suchbegriff) wurden entfernt.

Habe ich dort den Suchbegriff – oder auch jeden anderen – erneut eingetragen hat alles bestens geklappt. Die Google-Suchergebnisse wurden einwandfrei angezeigt. Bedienerfreundlich ist dieser Weg natürlich nicht, wenn die Abfrage quasi zweimal getätigt werden muss um Ergebnisse zu bekommen. Alle Umstellungen unter dem Layout von Google CSE haben nicht zum Ziel geführt.

Mir fiel bei der ganzen Bastelei auf, dass bei der „hauseigenen“ Suchfunktion von WordPress keine eigene Seite notwendig ist um Ergebnisse anzuzeigen. Diese Arbeit übernimmt schlicht und einfach die search.php. Das war nun mein neuer Ansatzpunkt.

Google CSE – Der Einbau ins Theme

Im Abschnitt „Code abrufen“ markiert man das Protokoll „http“ und trägt bei den Details zu den Suchergebnisse eine Adresse des eigenen Blogs ein, z.B. @@https://www.nicht-spurlos.de/suchergebnis/@@ und ändert den Abfrageparameter vom vorgegebenen „q“ auf „s“ (mir ist bewusst, dass auf etlichen anderen Seiten genau das Gegenteil behauptet wird). Anschließend Änderungen speichern!

Den Code im oberen Kasten (Custom Search Element) habe ich nicht verwendet, trotz aller CSS-Bearbeitungen ließ sich dieses Formular nicht so positionieren wie es jetzt steht. Statt dessen verwende ich die bereits vorhandene Searchform.

Öffne die search.php und entferne die Zeilen 21 inkl. 51 komplett. Statt dessen fügst Du den Code des unteren Kastens dort ein, speicherst die search.php und lädst sie wieder auf den Server.

<?php
/**
 * The template for displaying Search Results pages.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>

		<section id="primary">
			<div id="content" role="main">

			<?php if ( have_posts() ) : ?>

				<header class="page-header">
					<h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'twentyeleven' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
				</header>

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

				<?php /* Start the Loop */ ?>
				<?php while ( have_posts() ) : the_post(); ?>

					<?php
						/* Include the Post-Format-specific template for the content.
						 * If you want to overload this in a child theme then include a file
						 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
						 */
						get_template_part( 'content', get_post_format() );
					?>

				<?php endwhile; ?>

				<?php twentyeleven_content_nav( 'nav-below' ); ?>

			<?php else : ?>

				<article id="post-0" class="post no-results not-found">
					<header class="entry-header">
						<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
					</header><!-- .entry-header -->

					<div class="entry-content">
						<p><?php _e( 'Sorry, but nothing matched your search criteria. Please try again with some different keywords.', 'twentyeleven' ); ?></p>
						<?php get_search_form(); ?>
					</div><!-- .entry-content -->
				</article><!-- #post-0 -->

			<?php endif; ?>

			</div><!-- #content -->
		</section><!-- #primary -->

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

Nach der Bearbeitung sieht die search.php dann aus wie folgt. Neu sind die Zeilen 19 bis 47. Einzig die ID meiner Google CSE habe ich hier durch „X“ ersetzt.

<?php
/**
 * The template for displaying Search Results pages.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>

		<section id="primary">
			<div id="content" role="main">

            				<header class="page-header">
					<h1 class="page-title"><?php printf( __( 'Suchergebnisse zu: %s', 'hamburg' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
				</header>                

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.de/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'de', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
    function parseParamsFromUrl() {
      var params = {};
      var parts = window.location.search.substr(1).split('\x26');
      for (var i = 0; i < parts.length; i++) {
        var keyValuePair = parts[i].split('=');
        var key = decodeURIComponent(keyValuePair[0]);
        params[key] = keyValuePair[1] ?
            decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
            keyValuePair[1];
      }
      return params;
    }

    var urlParams = parseParamsFromUrl();
    var queryParamName = "s";
    if (urlParams[queryParamName]) {
      customSearchControl.execute(urlParams[queryParamName]);
    }
  }, true);
</script>

			</div><!-- #content -->
		</section><!-- #primary -->

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

Den ganzen „Rattenschwanz“ von CSS habe ich hier nicht eingefügt und in die style.css direkt eingefügt, das hält u.a. auch diese Datei übersichtlicher. Bei Änderungen am Design nicht vergessen auch die style.css mit anzupassen.

Standardmäßig öffnet nun die „neue Suchmaschine“ einen neuen Tab im Browser wenn der Leser einen Link aus den Ergebnissen anklickt. Darüber kann man streiten ob dies sinnvoll ist oder nicht. Ich finde es schöner wenn das gleiche Fenster verwendet wird. Viele Internetuser ärgern sich letztlich darüber wenn es ihnen nicht selbst überlassen wird ob ein neuer Tab angelegt werden soll. Wer dies genauso sieht muss noch einmal in den eben eingefügten Code eingreifen und diese Zeile einfügen:

customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

Dazu geht man (nach meinem o.g. Schema) in Zeile 26 und fügt o.g. Code darunter  als „neue Zeile 27“ ein! Nachfolgende Abbildung zeigt die nachträglich eingefügte Zeile gelb umrandet.

<?php
/**
 * The template for displaying Search Results pages.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */

get_header(); ?>

		<section id="primary">
			<div id="content" role="main">

            				<header class="page-header">
					<h1 class="page-title"><?php printf( __( 'Suchergebnisse zu: %s', 'hamburg' ), '<span>' . get_search_query() . '</span>' ); ?></h1>
				</header>                

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.de/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'de', style : google.loader.themes.V2_DEFAULT});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      'XXXXXXXXXXXXXXXXXXXXXXXXXXXX', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
	customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
    customSearchControl.draw('cse');
    function parseParamsFromUrl() {
      var params = {};
      var parts = window.location.search.substr(1).split('\x26');
      for (var i = 0; i < parts.length; i++) {
        var keyValuePair = parts[i].split('=');
        var key = decodeURIComponent(keyValuePair[0]);
        params[key] = keyValuePair[1] ?
            decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
            keyValuePair[1];
      }
      return params;
    }

    var urlParams = parseParamsFromUrl();
    var queryParamName = "s";
    if (urlParams[queryParamName]) {
      customSearchControl.execute(urlParams[queryParamName]);
    }
  }, true);
</script>

			</div><!-- #content -->
		</section><!-- #primary -->

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

Jetzt werden Links im gleichen Fenster geöffnet, Deine neue und bloginterne Suchmaschine kann jetzt „an die Arbeit“ gehen und von Besuchern genutzt werden.

Eine Garantie kann ich nicht übernehmen, dass diese Anleitung auch bei Dir zum Erfolg führen wird, die Themes sind wie erwähnt zu individuell. Eine sehr gute Anleitung hatte ich auch noch bei e-byz.ch gefunden. Leider kam ich damit nicht ans Ziel.

Viel Spaß mit dem neuen Werkzeug!

Schlagwörter:

Schreibe einen Kommentar

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

Du kannst Dich informieren lassen wenn es Folgekommentare gibt. Du kannst aber auch abonnieren ohne zu kommentieren.