Eigene Strukturelemente umsetzen

Veröffentlichungsdatum: 10. November 2014
Änderungsdatum: 17. August 2017

struktureditor strukturelement mastertemplate

Erstellen Sie Ihre eigenen Struktur-Elemente für den Einsatz von wiederverwendbaren Seiten-Funktionen.

Eigene Funktionen und Programmierungen können Sie Ihren Redakteuren über den gewohnten Struktureditor zur Verfügung stellen. In den meisten Fällen bietet es sich an, ein vorhandenes Strukturelement als Grundlage für ein eigenes Strukturelement heranzuziehen. Suchen Sie sich hierzu das Weblic^® als Grundlage aus, das Ihren Vorstellungen des individuellen Strukturelementes am nächsten kommt.

Vergewissern Sie sich vor Erstellen eines eigenen Strukturelementes, ob nicht bereits ein Weblic® bzw. eine CSS-Only-Variante hierzu besteht, welche Ihre geplante Umsetzung bereits abbildet! Gerne können Sie hierzu beim Weblication® Support nachfragen (siehe Link "Support" auf der rechten Seite).

Eigenes Strukturelement auf Basis des Horizontale Linie Weblics^®

Auf Basis des Weblics^® "Horizontale Linie" soll dieses Beispiel zeigen, wie Sie ein eigenes Strukturelement umsetzen. Einem Redakteur soll in der Bearbeitung ermöglicht werden, über eine Auswahlbox die Farbe aufgrund von CSS-Only-Definitionen zu bestimmen.

In den folgenden Quelltextbeispielen wird im linken Beispiel das Strukturelement "Horizontale Linie" (Standard) und im rechten Beispiel das individuell angepasste Strukturelement "Horizontale Linie (mit Farbauswahl)" angezeigt (Stand: November 2014).

layout.hr.wItem.php (Standardauslieferung)

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/Transform" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" xmlns:wsl="http://weblication.de/5.0/wsl" xmlns:wd="http://weblication.de/5.0/wd" xmlns:php="http://php.net/xsl" exclude-result-prefixes="wd wslEditorPre wslPre wslPost wsl php" version="1.0">
<!-- Source: base.standard, 002.001.449.000 (2014-11-03 16:26:04)-->
  
<wd:extension type="weblication" version="5.0" uid="f0796051868d6bb322b56d0fa60ef254">
  <wd:meta>
    <wd:title>Horizontale Linie</wd:title>
    <wd:description/>
    <wd:modification name="admin" time="1382449764"/>
    <wd:creation name="admin" time="1252018717"/>
    <wd:icon src="/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_hr.gif"/>
  </wd:meta>
  <wd:status>
    <wd:online from="" status="on" to=""/>
    <wd:type value=""/>
  </wd:status>
  <wd:version value="3"/>
</wd:extension>    
    
  <xsl:template match="wd:item[@type = 'layout.hr']" wChecksum="f37b70488fded31c00740a394f218f04">
    <!-- web:item:start name="Horizontale Linie" en:name="Horizontal line" iconStyle="" copy="1" delete="1" drag="1" display="" active="<xsl:value-of select="php:functionString('wEnv::getGlobalValue', 'wUseStructureEditor')" />" pathEditMastertemplate="/[IHR-LAYOUT-PROJEKT]/wGlobal/mastertemplates/items/layout.hr.wItemMastertemplate.php" pathEditXslt="/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/items/layout.hr.wItem.php" type="layout.hr"-->
    <hr/>
    <xsl:if test="$wIsInEditor and @wEditorId and php:functionString('wEnv::getGlobalValue', 'wUseEditor') != '0'"><br /></xsl:if>
    <!-- web:item:stop -->
  </xsl:template>    
   
</xsl:stylesheet>

Auszug aus der design.css (Standard)

/* ... */
hr                   {margin:0 0 10px 0;border-color:$borderColorLines;border-style:solid none none none;height:0px}
/* ... */

layout.hr.custom.wItem.php (Individuell angepasst)

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/Transform" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" xmlns:wsl="http://weblication.de/5.0/wsl" xmlns:wd="http://weblication.de/5.0/wd" xmlns:php="http://php.net/xsl" exclude-result-prefixes="wd wslEditorPre wslPre wslPost wsl php" version="1.0">
<!-- Source: base.standard, 002.001.449.000 (2014-11-03 16:26:04)-->
  
<wd:extension type="weblication" version="5.0" uid="f0796051868d6bb322b56d0fa60ef255">
  <wd:meta>
    <wd:title>Horizontale Linie (mit Farbwahl)</wd:title>
    <wd:description/>
    <wd:modification name="admin" time="1382449764"/>
    <wd:creation name="admin" time="1252018717"/>
    <wd:icon src="/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_hr.gif"/>
  </wd:meta>
  <wd:status>
    <wd:online from="" status="on" to=""/>
    <wd:type value=""/>
  </wd:status>
  <wd:version value="3"/>
</wd:extension>    
    
  <xsl:template match="wd:item[@type = 'layout.hr.custom']" wChecksum="f37b70488fded31c00740a394f218f05">
    <!-- web:item:start name="Horizontale Linie" en:name="Horizontal line" iconStyle="" copy="1" delete="1" drag="1" display="" active="<xsl:value-of select="php:functionString('wEnv::getGlobalValue', 'wUseStructureEditor')" />" pathEditMastertemplate="/[IHR-LAYOUT-PROJEKT]/wGlobal/mastertemplates/items/layout.hr.custom.wItemMastertemplate.php" pathEditXslt="/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/items/layout.hr.custom.wItem.php" type="layout.hr.custom"-->
    
      <xsl:choose>
        <xsl:when test="$wIsInEditor and @wEditorId and php:functionString('wEnv::getGlobalValue', 'wUseEditor') != '0'">
          <div style="white-space:nowrap">
            <div style="position:relative;float:right;">
              <img id="wConfigMaskOpener_{@uid}" src="/weblication/grid5/gui/images/editor/config.gif" title="{php:functionString('wTexts::showTextUser', 'Options', 'Formatierung')}" style="position:absolute;z-index:9;right:0;width:19px;height:20px;cursor:pointer;user-drag:none;-moz-user-select:none;-webkit-user-drag:none;">
                <xsl:choose>
                  <xsl:when test="php:functionString('wVariables::getValue', 'target_configMasks', '/[IHR-LAYOUT-PROJEKT]') = 'layer'">
                    <xsl:attribute name="onclick">wEditor.expandConfigMask('wConfigMask_<xsl:value-of select="@wEditorId"/>', this)</xsl:attribute>
                  </xsl:when>
                  <xsl:otherwise>  
                    <xsl:attribute name="onclick">wDocument.toggleDisplay('wConfigMask_<xsl:value-of select="@wEditorId"/>', {'animate' : 'height'})</xsl:attribute>
                  </xsl:otherwise>
                </xsl:choose>
              </img>
            </div>
            <div class="wEditorElementConfiguration" id="wConfigMask_{@wEditorId}" style="display:none;clear:both">
              <div class="wEditorElementConfigurationInner">
                <div class="wEditorElementHeadline"><xsl:value-of select="php:functionString('wTexts::showTextUser', 'color selection', 'Farbauswahl', 'sélection des couleurs')"/></div>
                <div class="wEditorElementLabel"><xsl:value-of select="php:functionString('wTexts::showTextUser', 'color', 'Farbe', 'couleur')"/></div>
                <div class="wEditorElementValue"><table width="100%" cellpadding="0" cellspacing="0"><tr><td style="width:50%"><!-- web:text:start editor="selectCssClassVariant" valueDefault="0" onchange="wEditor.saveDraftAndReload();" pathCss="<xsl:value-of select="$wCSSPath"/>" cssClass="elementLineHorizontal" validator="" inputStyle="width:auto" --><xsl:value-of select="wd:fragment[@id='layout']/text()"/><!-- web:text:stop --></td><td style="width:20px;padding:0 0 0 2px"><wsl:ifIsAdmin><wsl:button onclick="wOpenEditor('{$wCSSPath}', '', '/weblication/grid5/apps/wEditorWd/index.php', '', '', '', 'elementLineHorizontal_var' + wDocument.element('webtag_text_{wd:fragment[@id='layout']/@wEditorId}').value)" showInEditor="1" icon="css_stylesheets" caption="" title="{php:functionString('wTexts::showTextUser', 'Edit CSS', 'CSS anpassen')}" style="" size="small"/></wsl:ifIsAdmin></td></tr></table></div>                        
              </div>
            </div>
            <xsl:variable name="hrClass"><xsl:choose><xsl:when test="wd:fragment[@id='layout']/text() != ''">elementLineHorizontal_var<xsl:value-of select="wd:fragment[@id='layout']/text()"/></xsl:when><xsl:otherwise>default</xsl:otherwise></xsl:choose></xsl:variable>
            <hr class="{$hrClass}"/>
          </div>    
        </xsl:when>
        <xsl:otherwise>
          <xsl:variable name="hrClass"><xsl:choose><xsl:when test="wd:fragment[@id='layout']/text() != ''">elementLineHorizontal_var<xsl:value-of select="wd:fragment[@id='layout']/text()"/></xsl:when><xsl:otherwise>default</xsl:otherwise></xsl:choose></xsl:variable>
          <hr class="{$hrClass}"/>
        </xsl:otherwise>
      </xsl:choose>
    <!-- web:item:stop -->
  </xsl:template>    
   
</xsl:stylesheet>

Auszug aus der design.css (Erweiterung)

/* ... */
hr                   {margin:0 0 10px 0;border-color:$borderColorLines;border-style:solid none none none;height:0px}

/*@wCssFragment{class:elementLineHorizontal;variant:0;caption:Horizontale Linie Standard;caption-en:Line Default}*/
hr.elementLineHorizontal_var0                   {margin:0 0 10px 0;border-color:$borderColorLines;border-style:solid none none none;height:0px}
/*@wCssFragment{class:elementLineHorizontal;variant:1;caption:Horizontale Linie Blau;caption-en:Line Blue}*/
hr.elementLineHorizontal_var1                   {margin:0 0 10px 0;border-color:blue;border-style:solid none none none;height:0px}
/*@wCssFragment{class:elementLineHorizontal;variant:2;caption:Horizontale Linie Rot;caption-en:Line Red}*/
hr.elementLineHorizontal_var2                   {margin:0 0 10px 0;border-color:red;border-style:solid none none none;height:0px}
/* ... */

Schritt-für-Schritt

Es gibt keine allgemeingültige Anleitung für das Erstellen eines eigenen Strukturelementes. Sehen Sie diese Schritt-für-Schritt Anleitung daher als einen Beispiel-Leitfaden an, der sich am o.g. Beispiel orientiert. In der Regel können Sie dies aber auf eine Vielzahl anderer Umsetzungswünsche ebenso anwenden.

Eigenes Strukturelement auf Basis des Horizontale Linie Weblics^®
Schritt-für-Schritt
Schritt 1: Grundlage für eigenes Strukturelement finden
Schritt 2: Templates und Steuerungsdateien kopieren
Schritt 3: type-Angaben und Quelltext anpassen
Schritt 4: Prüfen der Anwendung

Schritt 1: Grundlage für eigenes Strukturelement finden

Besuchen Sie unser Weblics^® Portal und suchen Sie nach einem Weblic^®, das den Vorstellungen zu Ihrem geplanten Strukturelement am nächsten kommt. Ggf. findet sich sogar eine CSS-Only-Variante eines bestehenden Weblics^®, welche direkt von Ihnen eingesetzt werden kann und eine eigene Umsetzung nicht mehr erforderlich macht.

Gerne können Sie das Weblication^® Team oder den Support über den Supportweg kontaktieren, um in Erfahrung zu bringen, ob es die geplante Anwendung bereits (in abgewandelter Form) gibt.

Schritt 2: Templates und Steuerungsdateien kopieren

Weblics® Verwaltung - Weblic® Horizontale Linie

Ist ein Weblic^® als Basis für das individuelle Strukturelement gefunden und installiert, rufen Sie die Weblics^®-Verwaltung auf. Durch Klick auf den Aufklapp-Pfeil zum entsprechenden Weblic^® (z.B. "Horizontale Linie") werden Ihnen die wichtigsten Templates und Steuerungsdateien angezeigt.

Kopieren Sie diese Dateien und legen Sie diese unter eigenem Namen im jeweils gleichen Verzeichnis ab.

Anhand des Beispieles also:

Basis -> Neu

.../layout.hr.wItem.php -> .../layout.hr.custom.wItem.php
.../layout.hr.wItemMastertemplate.php -> .../layout.hr.custom.wItemMastertemplate.php

Schritt 3: type-Angaben und Quelltext anpassen

Passen Sie als erstes unbedingt die type-Angaben in den Templates an! Diese dienen der eindeutigen Zuweisung der Templates zu den entsprechenden Elementen!

Suchen Sie am besten über die Tastenkombination STRG+F nach der entsprechenden Angabe (im Beispiel: layout.hr) und passen Sie diese auf die von Ihnen definierte Angabe (z.B. layout.hr.custom) an.

Anschließend passen Sie die Templates dahingehend an, damit diese die Funktionen für die von Ihnen gewünschte Anwendung abbildet. Im Beispiel wurde das Strukturelement "Horizontale Linie" im individuellen Template um eine Farbauswahl erweitert.

Prüfen Sie, ob das Strukturelement ggf. auf weitere (Skript-)Dateien zurückgreift und passen Sie diese ebenso an (z.B. CSS, JS, etc.).

Schritt 4: Prüfen der Anwendung

Abschließend prüfen Sie die von Ihnen erstellten Templates auf Funktionalität. Fügen Sie hierzu in einer Seite das neue Strukturelement ein.
Ggf. müssen Sie zuvor im Verzeichnis des Templates den Aktualisieren-Button betätigen, damit der Index aktualisiert wird.

Weiterführende Links

Onlinedokumentation - Weblics®

Onlinedokumentation - Weblics® Verwaltung

Einfügen von Struktur-Elementen einschränken bzw. erlauben

FAQs

Wie kann ich eigene Strukturelemente in Weblic® erstellen?: Erstellen Sie Ihre eigenen Struktur-Elemente über den gewohnten Struktureditor. In der Regel sollten Sie ein vorhandenes Strukturelement als Grundlage verwenden und daran anpassen.
Sollte ich vor der Erstellung eines eigenen Strukturelements prüfen, ob es bereits eine Variante gibt?: Ja. Vergewissern Sie sich vorab, ob es bereits eine Weblic®-Variante oder eine CSS-Only-Variante gibt, die Ihre geplante Umsetzung bereits abbildet. Bei Bedarf können Sie den Weblication® Support kontaktieren.
Wie finde ich eine passende Grundlage für mein eigenes Strukturelement?: Suchen Sie in der Weblic®-Verwaltung ein Strukturelement, das Ihren Vorstellungen am nächsten kommt. Falls vorhanden, kann auch eine CSS-Only-Variante bereits direkt nutzbar sein.
Wie sieht ein Beispiel für ein eigenes Strukturelement auf Basis der „Horizontale Linie“ aus?: Im Beispiel wird ein neues Strukturelement „Horizontale Linie (mit Farbauswahl)“ erstellt. Dabei erhält der Redakteur in der Bearbeitung eine Auswahlbox, mit der sich die Farbe über CSS-Only-Definitionen bestimmen lässt.
Welche Dateien muss ich beim Anpassen typischerweise kopieren?: Wenn Sie ein Strukturelement als Basis gefunden haben, kopieren Sie die wichtigsten Templates und Steuerungsdateien aus dem Verwaltungsbereich (unter „Basis -> Neu“) in ein Verzeichnis mit Ihrem neuen Namen. Im Beispiel: - .../layout.hr.wItem.php -> .../layout.hr.custom.wItem.php - .../layout.hr.wItemMastertemplate.php -> .../layout.hr.custom.wItemMastertemplate.php
Warum ist es wichtig, die „type“-Angaben in den Templates anzupassen?: Die „type“-Angaben dienen der eindeutigen Zuweisung der Templates zu den entsprechenden Elementen. Sie müssen daher im Beispiel von „layout.hr“ auf die neue Angabe (z. B. „layout.hr.custom“) angepasst werden.
Wie passe ich die Quelltexte nach dem Kopieren an?: Passen Sie die Templates so an, dass die gewünschten Funktionen abgebildet werden. Im Beispiel wurde im individuellen Template eine Farbauswahl ergänzt. Prüfen Sie außerdem, ob das Strukturelement auf weitere Dateien (z. B. CSS/JS) zurückgreift, und passen Sie diese bei Bedarf ebenfalls an.
Wie kann ich CSS-Varianten für eine Farbauswahl bereitstellen?: Im Beispiel werden CSS-Varianten über Klassen definiert, z. B. <code class="codeInline">hr.elementLineHorizontal_var0</code>, <code class="codeInline">hr.elementLineHorizontal_var1</code> und <code class="codeInline">hr.elementLineHorizontal_var2</code>, wobei die Border-Farbe entsprechend gesetzt wird. Diese Varianten werden dann über die Farbauswahl im Editor referenziert.
Wie prüfe ich, ob mein neues Strukturelement funktioniert?: Fügen Sie das neue Strukturelement in einer Seite ein und prüfen Sie die Funktionalität. Falls nötig, betätigen Sie zuvor im Verzeichnis des Templates den „Aktualisieren“-Button, damit der Index aktualisiert wird.