Tag Archives: Pixgridder

Das WordPress Plugin Pixgridder ist eines der besten für die einfache Erstellung von Content mit frei, flexibel erstellbaren Spalten.
Leider ist es aber auch von Grundauf nicht für Bootstrap optimiert, und das letzte Update ein wenig her. Dadurch gibt es ab einer Spalten Anzahl von 12 verschiedene Fehler, die bei der Bearbeitung von Inhalten ziemlich nervig sein können.

Prinzipiell müssen bei der Verwendung von Pixgridder und Bootstrap für jede angelegte Reihe 12 Spalten eingestellt werden.

pixgridder-12-cols

Aber nun zu den Anpassungen um Pixgridder für Bootstrap anzupassen und verschiedene Bugs zu beheben.

STEP 1: Die functions.php

Die functions.php findet man im Plugin Root Ordner. Die erste Anpassung befindet sich in der Funktion admin_scripts

public function admin_scripts() {
	global $pagenow;
	if ( $pagenow == 'post.php' || $pagenow == 'post-new.php' ) {
		wp_enqueue_script( $this->plugin_slug . '-modernizr', PIXGRIDDER_URL.'scripts/modernizr.pix.js', array(), '2.6.2' );
		wp_enqueue_script( $this->plugin_slug . '-ui-touch-punch', PIXGRIDDER_URL.'scripts/jquery.ui.touch-punch.min.js', array('jquery-ui-mouse'), '0.2.2', false );
		wp_enqueue_script( $this->plugin_slug . '-livequery', PIXGRIDDER_URL.'scripts/jquery.livequery.js', array('jquery'), '1.1.1', false );
		wp_enqueue_script( $this->plugin_slug, PIXGRIDDER_URL.'scripts/gridder.js', array($this->plugin_slug.'-modernizr','jquery','jquery-ui-core',$this->plugin_slug.'-ui-touch-punch','jquery-ui-sortable',$this->plugin_slug.'-livequery','jquery-ui-resizable','jquery-ui-dialog') );
	}
	if ('options-general.php' == $pagenow && isset($_GET['page']) && $_GET['page']=='pixgridder_admin') {
		wp_enqueue_script( $this->plugin_slug . '-admin', PIXGRIDDER_URL.'scripts/admin.js', array('jquery'), $this->version );
	}
}

In dieser Funktion werden verschiedene Javascript Dateien geladen, die für die Verwendung von Pixgridder benötigt werden. Eine unserer Anpassungen betrifft nun aber die gridder.js. Diese ist minifiziert und eignet sich wenig zum bearbeiten. Daher schreiben wir diese Zeile um und nutzen die auch verfügbare gridder.dev.js

wp_enqueue_script( $this->plugin_slug, PIXGRIDDER_URL.'scripts/gridder.dev.js', array($this->plugin_slug.'-modernizr','jquery','jquery-ui-core',$this->plugin_slug.'-ui-touch-punch','jquery-ui-sortable',$this->plugin_slug.'-livequery','jquery-ui-resizable','jquery-ui-dialog') );

Die nächste Änderung betrifft nun die Funktion filter_content. Hier muss die Frontendausgabe für die Spalten angepasst werden.
Das Original sieht wie folgt aus

$column_open = apply_filters('pixgridder_column_open', "<div class=\"column\" data-col=\"$1\">");
$column_close = apply_filters('pixgridder_column_close', "</div><!--.column[data-col=\"<code>blockquote</code>"]-->");

Nach der Änderung sollten diese Zeilen wie folgt aussehen:

$column_open = apply_filters('pixgridder_column_open', "<div class=\"col-sm-$1\" data-col=\"$1\">");
$column_close = apply_filters('pixgridder_column_close', "</div><!--.column[data-col=\"$1\"]-->");

Im nächsten Artikel, Pixgridder Bootstrap fähig machen Part II, wird der größere Regex Bereich beleuchtet der Backendtechnisch einiges handelt.

Oft ist zu hören das WordPress ein reines Blogging System ist in dem Content, also die Inhalte nicht ordentlich eingepflegt werden können. Im speziellen bei Seiten, die die normale Struktur sprengen. Dann wird lieber ein Enterprise CMS genutzt welches für die meisten Seiten einfach nur übertrieben ist. Warum also nicht WordPress, ein schlankes und effizientes System, nutzen? Speziell für dem Fall Content haben wir hier ein perfektes Plugin, das im großen und ganzen schon sehr gut läuft und diese Bedürfnisse abdeckt.

Pixgridder

A simple page grid composer that splits your pages into ordered grids, a builder for rows and columns

Und genau das, beschreibt auch das Plugin im Detail. Der Redakteur hat mit diesem Plugin die Möglichkeit Reihen mit der Anzahl der Spalten zu definieren. Hier lassen sich dann die Inhalte über den bekannten WordPress Editor pflegen.

Für alle die ein ausgefeilteres Content Pflege System in WordPress vermisst haben und nicht auf die Benutzerdefinierten Felder zurückgreifen wollen ist dies das langersehnte Tool.

Wichtig zu erwähnen ist hierbei aber noch, das dieses Plugin nur auf den Seiten verfügbar ist und nicht in den Blog Beiträgen. Weiterhin empfiehlt es sich den Content über Chrome zu pflegen. Firefox macht hier Probleme, da er sich wohl beim parsen des Codes schwer tut und Inhalte kopiert, an die falsche Stelle etc schreibt. Dieses Verhalten ist aber im Support Bereich des Plugins bei WordPress schon bekannt. Ich hoffe auf Lösung des Problem.