faq.phpwcms-docu.de

1. Vorbereitung

Laden Sie sich hier die neueste Version der MooTools herunter: http://mootools.net/download. Wählen Sie dazu "Accordion" (am Fuß der Seite) auf der Downloadseite aus und speichern Sie die Datei im phpwcms-Verzeichnis template/in_js/mootools. Benennen Sie die vorhandene Datei mootools.js um, z.B. in alte_mootools.js. Benennen Sie anschließend die heruntergeladene Datei um in mootools.js und laden Sie sie auf Ihren Webserver hoch.

Öfnnen Sie die Datei config/phpwcms/config.inc.php und setzen Sie Doctype auf XML:

$ phpwcms [ 'mode_XHTML' ] = 1;

Speichern Sie die Datei und übertragen Sie sie auf Ihren Webserver.

2. CSS-Datei

Erstellen Sie im Verzeichnis /templates/inc_css/ eine Textdatei mit dem Namen accordion.css. Fügen Sie folgenden Code in die neue CSS-Datei ein:

/* ====================================================
accordion.css fuer die FAQ-Akkordeon-Vorlage
==================================================== */

.toggler {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 120%;
cursor: pointer;
padding: 2px 10px;
margin-bottom: 1px;
background: #f0f0f0;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}

.toggler {
a:link, .toggler a:visited, .toggler a:hover {
font-weight: bold;
color: #003366;
text-decoration: none;
}

.accordion {
width: 95%;
background: #ffffff;
padding: 0px 10px;
margin: 0px;
}

.element {
padding: 0px 10px;
}

.faqImage {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}

.faqCaption {
}

Speichern Sie die Datei und laden Sie sie auf Ihren Webserver hoch. Durch Ändern dieser Style-Angaben können Sie nahezu das komplette Aussehen Ihrer FAQs im Akkordeon-Look bestimmen.

3. Artikelvorlage erstellen

Rufen Sie im phpwcms Backend unter ADMIN -> SEITENLAYOUT Ihr Seitenlayout auf. Tragen Sie im Bereich "Blöcke" ins Textfeld "Eigene" das Wort ACCORDION (Groißbuchstaben) ein, um Ihren eigenen Block bzw. ContentPart zu erstellen.

4. Artikelvorlage erstellen

Erstellen Sie unter ADMIN-> VORLAGEN eine neue Vorlage oder duplizieren Sie eine Ihrer Vorlagen, um diese um die FAQ-Akkordeon-Einträge zu erweitern. Nennen Sie die neue Vorlage "faq_accordion".

CSS-Datei:

Wählen Sie unter "CSS-Datei" zusätzlich zur frontend.css auch die CSS-Datei accordion.css aus. Beide Dateien sollten blau hinterlegt sein.

HTML-Kopf:

Fügen Sie ins Feld "HTML-Kopf" folgenden Code ein, ggf. unterhalb Ihrer weiteren Einträge:

<script src="template/inc_js/mootools/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready',
function(){
var accordion = new Accordion('h3.atStart', 'div.atStart', {
opacity: 0.5, duration: 800, alwaysHide: true, show: -1
},
$('accordion'));
});
</script>

Hauptbereich:

Richten Sie Ihre Vorlage weiter ein, wie Sie sie benötigen.

Falls Ihre Vorlage im Feld "Haupt" bereits eingerichtet ist und Code enthält, fügen Sie den folgenden Code an der Stelle in Ihre Vorlage ein, an der die FAQ im Akkordeon-Look erscheinen sollen:

... your other coding ...
<!-- start accordion-faq ->
<div id="accordion">{ACCORDION}</div>
<!-- end accordion-faq ->
... your other coding ...

5. FAQ-Akkordeon-Vorlage erstellen:

Erstellen Sie eine Textdatei und fügen Sie folgenden Code ein:

[FAQ_QUESTION]<h3 class="toggler atStart" id="faq_id{FAQ_ID}" >{FAQ_QUESTION}</h3>[/FAQ_QUESTION]
<div class="element atStart">
[FAQ_ANSWER]
<div class="faqAnswer">
[FAQ_IMAGE]
<div class="faqImage">
{FAQ_IMAGE}
[FAQ_CAPTION]
<div class="faqCaption">
{FAQ_CAPTION}
</div>
[/FAQ_CAPTION]
</div>
[/FAQ_IMAGE]
{FAQ_ANSWER}
</div>
[/FAQ_ANSWER]
</div>
<div style="clear:both;"></div>

Speichern Sie die Datei unter dem Namen accordion.tmpl im phpwcms-Verzeichnis templates/inc_cntpart/faq/ und übertragen Sie sie auf Ihren Webserver.

5. Strukturebene erstellen

Rufen Sie im phpwcms-Backend ADMIN -> SEITENSTRUKTUR auf. Erstellen Sie eine Strukturebene für Ihre FAQs im Akkordeon-Look oder fügen Sie einer bestehenden Strukturebene die FAQ-Akkordeon-Funktion hinzu:

Doppelklicken Sie im rechten Feld des Bereichs "Content Part selection" auf den Eintrag "faq", um ihn der linken Spalte hinzuzufügen.

Klicken Sie auf "Sichern", sobald Sie alle Einstellungen vorgenommen haben.

6. FAQ-Artikel erstellen

Wechseln Sie ins Menü ARTIKEL und erstellen Sie einen neuen Artikel in der Strukturebene, die Sie soeben für die Aufnahme der FAQ vorbereitet haben.

Füen Sie der Seiten den ContentPart "faq" hinzu

Wählen Sie im Feld „Vorlage" die Vorlage "accordion.tmpl" aus.

Geben Sie nun in die Felder "Frage" und "Antwort" Ihre erste FAQ ein.

Klicken Sie auf SICHERN .

Zum Eingeben der nächsten Frage und Antwort wählen Sie im Fenster "Artikelinformation" FAQ im Listenfeld in der Mitte aus und klicken auf HINZUFÜGEN.

Die hier beschriebene FAQ-Lösung in Akkordeon-Stil funktioniert mit Linux, Mac, Windows sowie in Firefox, Opera, Maxthon, IE7/IE6, Safari >1.3x.

Demo: http://demos.mootools.net/Accordion

Thema xhtml: http://de.selfhtml.org/html/allgemein/grundgeruest.htm

Alternative Anleitungen sind hier zu finden:
http://phpwcms-templates.de/moo_fx_Akoordeon-Effekt.phtml#
http://forum.phpwcms.org (unter den Suchbegriffen "accordion","accordeon" oder auch "Akkordeon")