[simple] Artikel in Zeitungs-Spalten aufteilen

Text in Spalten aufteilen-Zeitungsspalten in WP
Text in Spalten aufteilen-Zeitungsspalten in WP

Mag man immer oder nur hie und da den Inhalt eines Artikels in Spalten aufteilen- so wie Zeitungsspalten – so gibts deren sicher viele Möglichkeiten. Eine davon mag ich hier aufzeigen. Ich kam auf die Idee als ich die Tage sehr viele Shortcodes geschrieben habe.

Shortcodes sind für dies insofern nützlich, weil man den Output einfach in einem sehr simplen Plugin ändert und schon passen sich die vorhandenen Spalten an das etwaig neue WP Thema an. Hat man nämlich das für die Spalten nötige HTML direkt in den Artikel geschrieben wird eine spätere Anpassung an ein anderes Theme sehr kompliziert.

Diese Shortcodes kann man entweder als Quicktags oder mit dem WP Plugin TinyMCE Advanced zur Verfügung stellen.

Ein Spalten Text Beispiel

Ich zeige hier ein Layout mit 2 Spalten.

Spalte 1

Du erstellst zuerst die Shortcodes in einem simplen Plugin. Dann fügst du das nötige CSS in die style.css. Ist es nicht dein Theme, dann nutze ein Child-Theme oder ein Custom CSS Plugin.

Spalte 2

Hast du Quicktags dann markierst Du den ganzen Text, der in die erste Spalte sollte und klickst auf den Button „column“. Danach markierst Du den restlichen Text und klickst auf den Button „column_last“. Nun speicherst du den Artikel und siehst dir in der Vorschau an, ob die Spalten so aussehen wie du sie haben magst. Wenn nicht jongliere mit dem Text ein wenig :-)


Shortcodes in die functions.php?

Shortcodes gehören nicht in die functions.php. Daher erklär ich dir hier kurz wie du ein Plugin dafür erstellen kannst.

Mit einem Texteditor speicherst du eine leere Datei mit folgendem Namen: meine-shortcodes.php und wenn du magst erstellst du einen Ordner „meine-shortcodes“ für deine Plugindatei.

Nun braucht es gewisse Angaben, damit dein Plugin als solches erkannt wird.

/*
Plugin Name: Meine Shortcodes
Description: Shortcodes für: Spalten, usw...
Version:     0.1
Author:   deinName
Plugin URI: url zu dir 
 */

Für mehr INFO lies bitte dies Header Requirements.

Das ist also nun der Beginn eines rudimentären Plugins, das aber seine Aufgabe erfüllt.

Aktivierst du irgendwann ein anders Theme, hast du deine Shortcodes immer noch zur Verfügung und brauchst etwaig nur mehr das CSS dafür anzupassen.


/*
spalten  erstellt am datum
*/
// erste spalte 
function my_column($atts, $content = null) {
	return '
<div class="column">'. do_shortcode($content) .'</div>
';
}
add_shortcode('column', 'my_column');

//letzte spalte
function my_column_last($atts, $content = null) {
	return '
<div class="column last">' . do_shortcode($content) . '</div>
<br class="clear" />';
}

add_shortcode('column_last', 'my_column_last');

Speichere dein Plugin, lade den Ordner mit der Datei nach wp-content/plugins/ und aktiviere es: Dashboard => Plugins => meine Shortcodes.

Nun gibts zwei neue Shortcodes in Deinem WP. [column]Dein Text…. [/column] und für die zweite Spalte [column_last] Der andere Text [/column_last]

Diese von dir erstellen Shortcodes ermöglichen es dir auch andere Shortcodes zwischen den deinen zu nutzen.

D.h bedeutet du kannst

[column_last] [anderershortcode] [/column_last] nutzen.

das HTML der Shortcodes

Es ist oben ersichtlich, doch der Vollständigkeit halber hier nochmals extra:

<div class="column normal">  
        Erste Spalte 
   </div>
<div class="column last"> 
     Zweite Spalte 
  </div>
<br class="clear" />

Das zusätzliche MarkUp mag nicht die absolut perfekteste HTML Schule sein, doch es ist Crossbrowser sicher. Und unabhängig davon, du kannst dieses HTML deinen Bedürfnissen anpassen.

das CSS für diese Spalten

Dieses CSS ist absolut sicher, egal ob uralter Browser oder hochmoderner. Es dient hier nur als Beispiel.

.column, .column-last {
float:left;
width:47%;}
.normal{margin:10px  2% 10px 0; }
.last {margin:10px  0 10px 0;}
.clear{clear:both;}


Du kannst auf diese Art natürlich auch 3-oder 4spaltiges Zeitungslayout in einem Artikel erstellen.

Ich wünsch viel Spaß beim Erkennen der Möglichkeiten, beim Nutzen und Erobern der Shortcodes für dich.

5

5 Beiträge zu “[simple] Artikel in Zeitungs-Spalten aufteilen

  1. Ping CSS3: Mehrspaltiger Text | WordPress & Webwork

  2. Kommentar Autor
    Ramona
    Kommentar

    Wieder einmal danke an Monika!
    Weil ich inzwischen schon mehrere Shortcodes eingesammelt habe, schreibe ich sie in eine shortcodes.php, die ich in die functions.php einbinde, das ist für mich übersichtlicher. So muss ich bei einem Themewechsel „nur“ eine Codezeile ändern und die shortcodes.php ins Verzeichnis reinkopieren. Allerdings nicht zu vergessen: CSS für das neue Theme ggf. anpassen.

  3. Kommentar Autor
    Monika
    Kommentar

    ja stimmt Ramona,
    wenn’s ganz viele werden, dann ist eine eigne Datei dafür übersichtlicher,

    vorallem auch leichter in ein etwaig völlig anders Theme zu übernehmen,

  4. Kommentar Autor
    get4
    Kommentar

    Hallo,
    super tip, da die Lösungen die ich bis jetzt gesehen habe eben nicht in jedem Browser umgesetzt werden. Aber hättest du vielleicht auch eine Idee wie ich dann für diese Tags einen Button im Editor erhalte?
    So wäre dann eine Userfreundlichkeit im Editor vorhanden, denn nicht alle Nutzer an Webseiten haben solche Shortis dann im Kopf.

    Gruß
    Oliver

  5. Kommentar Autor
    Monika
    Kommentar

    aber sicher habe ich das

    hier eigene Quicktags auch WP 3.3.. sicher