Tag Archives: Bootstrap

Das Modul Oxid Bootstrap CMS für CE ist noch nicht ganz fertig, dennoch will ich hier nun ein paar Informationen rausrücken. Welche Funktionalitäten es gibt, wie es aufgebaut ist und wie der aktuelle Status ist.
Hier vorab sei nur gesagt, es wird aktuell an einem Projekt direkt getestet und kann so demnächst dann für viele viele CE Shops verwendet werden.
Informationen zum Projekt sind hier zu finden.

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.

Heute wurde der Relaunch der Seite von mir durchgeführt. Technische Basis ist eine aktuelle WordPress Version mit auf Bootstrap aufgebautem Template. Alte News Beiträge sind weiterhin verfügbar und im Archiv vorzufinden. Durch Einsatz von Bootstrap ist die Seite mit aktuellen Technologien auch auf mobilen Endgeräten gut anzusehen. Die Inhalte wurden aktualisiert und neu strukturiert. Ein weiterer elementarer Bereich ist nun der Menu Punkt Projekte. Diesem möchte ich mehr Aufmerksamkeit, neben den Kunden Projekten, entgegenbringen.

Lange Rede kurzer Sinn, ich wünsche viel Spaß beim durchstöbern der Seite.