Advanced Custom Fields ist ein WordPress Plugin das WordPress weitgehend anpassen und für den Nutzer erleichtern kann. Das Einbinden ist jedoch nicht ganz einfach und man muss einige Dinge an den PHP Dateien anpassen. In diesem Beitrag soll einmal gezeigt werden, wie man ein simples Feld in seiner WordPress Seite einbinden kann.

Bevor es losgeht noch 3 Wörter zum Thema was das Plugin eigentlich genau macht: Wenn man zum Beispiel, so wie wir, Webseiten für seine Kunden erstellt kann es vorkommen dass sich nicht jeder Kunde mit Dingen wie HTML, Tabellenerstellung oder ähnlichen, das Webdesign beeinflussenden Dingen, auskennt. So kann man dann alles für den Kunden so vorbereiten, dass er ganichts „kaputt machen“ kann und den Inhalt komplett vom Design trennen.

Nun zum Inhalt dieses Experten Tutorials in Premium Qualität

1. Plugin installieren
2. Felder Gruppen anlegen
3. Ansicht im Backend
4. Inhalte in eine Unterseite einbinden
5. Ansicht im Frontend
6. Weiterführende Links

1. WordPress Tutorial – Advanced Custom Fields, Plugin installieren

Gehen Sie zum Installieren des Plugins wie immer auf den Bereich Plugins > Plugin installieren und geben Sie „Advanced Custom Fields“ im Suchfeld ein. Wenn Sie das hingekriegt haben klicken Sie auf den Installieren Knopf. Achten Sie auch darauf, ob das Plugin kompatibel mit Ihrer Version ist.

Wordpress Tutorial - Advanced Custom Fields

WordPress Tutorial – Advanced Custom Fields

2. WordPress Tutorial – Advanced Custom Fields, Felder Gruppen anlegen

Nachdem Sie das Plugin erfolgreich installiert haben sehen Sie auf der linken Seite den neuen Button „Eigene Felder“. Klicken Sie da drauf und dann auf der nächsten Seite auf“Neu erstellen“ Button hinter Felder-Gruppen.

In diesem Beispiel wurde bereits eine Gruppe mit dem Namen Nordic Walking angelegt:

Wordpress Tutorial - Advanced Custom Fields - Felder Gruppen

WordPress Tutorial – Advanced Custom Fields – Felder Gruppen

In der Gruppe wurden 7 Felder angelegt die man mit einem Klick auf den Titel der Felder-Gruppe Nordic Walking klickt. Das schauen wir uns jetzt einmal genauer an:

Wordpress Tutorial - Advanced Custom Fields - Kurs

WordPress Tutorial – Advanced Custom Fields – Kurs

Hierzu ein paar Erklärungen…

a) Felder-Gruppen Name: Ganz oben haben wir die Überschrift der gesamten Felder-Gruppe: „Nordic Walking“ – wenn Sie zahlreihe Gruppen anlegen macht es Sinn aussagekräftige Namen zu verwenden. In dieem Beispiel soll ein Termin Bereich auf der Webseite prima-aktiva.de, von unserer lieben Kundin Anja Karweit, erstellt werden. Daher bekommt die Felder-Gruppe also den Namen Nordic Walking.

b) Eigene Felder: Wir sehen insgesamt 7 Eigene Felder – diese kann man per Drag & Drop in der Reihenfolge ändern. Man sieht in der Übersicht, dass jedem Feld immer 4 Dinge zugeordnet sind: Die Position, die Bezeichnung, der Name und der Feld-Typ. Ich rate Ihnen jedes Feld eine Bezeichnung mit dem gleichen Anfangswort zu geben. In diesem Fall wurde hierfür das Wort Kurs verwendet. Wenn Sie eine Bezeichnung eingeben, wird der Name automatisch erstellt – hierzu später noch mehr. Der Feldtyp ist auch sehr wichtig – in der Grundinstallation haben Sie bereits eine große Auswahl unterschiedlicher Feldtypen. Die Liste kann auch durch Plugins von Drittanbietern erweitert werden.

c) Regeln: Hier habe ich festgelegt, dass die Felder Gruppe nur auf der Seite Nordic Walking angezeigt werden soll. Es gibt noch viele andere Optionen zur Auswahl.

d) Optionen: Hier kann man in den gewählten Bereichen (hier: auf der Nordic Walking Seite) bestimmte Funktionen ausschalten, damit man sich im Frontend nicht mit unwichtigen Dingen rumzuschlagen braucht. So kann man zum Beispiel das ganze normale Bearbeitungsfeld ausblenden. In unserem Beispiel wurden keine Bereiche deaktiviert.

Und hier seht ihr noch einmal die einzelnen Felder mit allen individuellen Einstellungen:

Wordpress Tutorial - Advanced Custom Fields - Einzelne Felder

WordPress Tutorial – Advanced Custom Fields – Einzelne Felder

3. WordPress Tutorial – Advanced Custom Fields, Ansicht im Backend

So jetzt schauen wir uns einmal an, wie das ganze dann im Backend aussieht. Diese Felder sind wie gesagt nur im Bearbeiten Bereich der Seite Nordic Walking zu sehen:

Wordpress Tutorial - Advanced Custom Fields - Backend Ansicht

WordPress Tutorial – Advanced Custom Fields – Backend Ansicht

All diese Sachen sieht man jedoch nur im Backend, während sich im Frontend nichts ändert, bevor man den Code der page.php Datei des WordPress (Child-) Themes anpasst. Hierzu mehr im nächsten Punkt…

4. WordPress Tutorial – Advanced Custom Fields, Inhalte in eine Unterseite einbinden

Nachdem ich mich eipaar Stunden eingelesen habe, habe ich folgenden Code verwendet um diese Inhalte im Frontend (ausschließlich auf der Nordic Walking Seite) einzubinden. Moment! Erst einmal muss man wisssen, wo der Code reinkopiert wird. In der page.php Datei meines Childthemes kommt der Code nach der letzen Zeile dieses CODE-Schnipsels rein:

<?php
/**
 * Theme Page Section for our theme.
 *
 * @package ThemeGrill
 * @subpackage Accelerate
 * @since Accelerate 1.0
 */
?>

<?php get_header(); ?>

	<?php do_action( 'accelerate_before_body_content' ); ?>

	<div id="primary">
		<div id="content" class="clearfix">
			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

				<?php
					do_action( 'accelerate_before_comments_template' );
					// If comments are open or we have at least one comment, load up the comment template
					if ( comments_open() || '0' != get_comments_number() )
						comments_template();
	      		do_action ( 'accelerate_after_comments_template' );
				?>

			<?php endwhile; ?>

Nach dieser Zeile binde ich dann den entscheidenden Code ein:

 <!-- Anpassung ADVANCED CUSTOM FIELDS FELD FÜR NORDIC WALKING SEITE -->
                    <?php if(is_page('nordic-walking')){ ?> <!-- Nur auf der Unterseite Nordic Walking zu sehen! -->
                        <div class="walking-termin">
                            <h3><?php _e('Nächster Termin für einen Kompaktkurs'); ?>: <?php the_field('kurs_termin'); ?></h3>
                            <table>
                                <tr>
                                    <td><?php _e('<strong>Uhrzeit</strong>'); ?>: </td>
                                    <td><?php the_field('kurs_uhrzeit'); ?></td>
                                </tr>
                                <tr>
                                    <td><?php _e('<strong>Anmeldung</strong>'); ?>: </td>
                                    <td><?php the_field('kurs_anmeldung'); ?></td>
                                </tr>
                                <tr>
                                    <td><?php _e('<strong>Kosten pro Termin à 3 Std.</strong>'); ?>: </td>
                                    <td><?php the_field('kurs_gebuhr'); ?></td>
                                </tr>
                                <tr>
                                    <td><?php _e('<strong>Nächste Haltestelle</strong>'); ?>: </td>
                                    <td><?php the_field('kurs_haltestelle'); ?></td>
                                </tr>
                                <tr>
                                    <td><?php _e('<strong>Treffpunkt</strong>'); ?>: </td>
                                    <td><?php the_field('kurs_treffpunkt_adresse'); ?></td>
                                </tr>
                            </table>
                        </div>
                        <!-- Google Map Einbinden -->
                        <div class="walking-map">
                            <?php
                            $location = get_field('kurs_treffpunkt_googlemap'); // VARIABLE FÜR GOOGLE MAP AUS ACF = kurs_treffpunkt
                            if( ! empty($location) ):
                            ?>
                            <div id="map" style="width: 100%; height: 350px;"></div>
                            <script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
                            <script type="text/javascript">
                            //<![CDATA[
                                    function load() {
                                    var lat = <?php echo $location['lat']; ?>;
                                    var lng = <?php echo $location['lng']; ?>;
                            // coordinates to latLng
                                    var latlng = new google.maps.LatLng(lat, lng);
                            // map Options
                                    var myOptions = {
                                    zoom: 16,  // ZOOOOOOOOOOM!!!!!
                                    center: latlng,
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                            };
                            //draw a map
                                    var map = new google.maps.Map(document.getElementById("map"), myOptions);
                                    var marker = new google.maps.Marker({
                                    position: map.getCenter(),
                                    map: map
                            });
                            }
                            // call the function
                            load();
                            //]]>
                            </script>
                            <?php endif; ?>
                        </div>    <!-- Ende view 1 -->
                        <!-- Ende Google Maps -->
                    <?php } ?>  <!-- ENDE: Nur auf der Unterseite Nordic Walking zu sehen! -->
                    <!-- Ende Anpassung -->

Das sieht auf den ersten Blick etwas kompliziert aus, daher ein paar Kurze Erklärungen:

a) Anzeige nur auf einer bestimmten Seite: Der ganze Code ist umschlossen von der Anweisung, dass die Inhalte nur auf der Seite nordic-walking angezeigt werden soll.

<?php if(is_page('nordic-walking')){ ?><!-- Nur auf der Unterseite Nordic Walking zu sehen! -->
ACF Code...
<?php } ?>  <!-- ENDE: Nur auf der Unterseite Nordic Walking zu sehen! -->

b) Einbindung der Felder-Variablen: Die zuvor definierten Variablen bzw. Namen der Felder bindet man auf diese Weise ein:

<?php the_field('kurs_uhrzeit'); ?>

– man kann das, so wie wir, in eine Tabelle einbinden oder auch in einen div Bereich. Hier hat man die volle Bandbreite von CSS zur Auswahl. In unserer Tabelle werden rechts die Variablen ausgegeben, die man im Frontend eingibt. Auf der linken Seite stehen die Titel, welche im Frontend NICHT angepasst werden können. Ganz oben ist auch noch einmal die Variable aus dem Kalender Feld in einer grossen Überschrift eingebunden:

 <h3><?php _e('Nächster Termin für einen Kompaktkurs'); ?>: <?php the_field('kurs_termin'); ?></h3>

c) Einbindung einer Google Map: Weiter unten wird es knifflig. Wer nicht unbedingt eine Google Map benötigt kann diesen Teil ignorieren. Das Wichtigste ist diese Zeile:

$location = get_field('kurs_treffpunkt_googlemap'); // VARIABLE FÜR GOOGLE MAP AUS ACF = kurs_treffpunkt

Hier muss die Variable der Gogle Map aus dem Plugin eingebunden werden. Man kann die Höhe der Map anpassen und auch den Zoom einstellen. Genau da an der Stelle, wo ganz dezent ZOOOOOOOOOM!!!! steht. Je größer die Zahl desto näher wird an den Ort gezoomt.

5. WordPress Tutorial – Advanced Custom Fields, Ansicht im Frontend

Und jetzt schauen wir und zum Schluss das ansehnliche Ergebnis im Frontend an und klopfen uns nach erfolgreicher Operation auf die Schultern.

Wordpress Tutorial - Advanced Custom Fields - Frontend Ansicht

WordPress Tutorial – Advanced Custom Fields – Frontend Ansicht

6. Weiterführende Links
A) Kommentar, Erklärung und Code-Schnipsel zum Thema:
http://www.holgerkoenemann.de/mit-dem-advanced-custom-fields-plugin-wordpress-als-richtiges-cms-nutzen/
B) Der perfekte Code um die Google Map einzubinden:
https://wordpress.org/support/topic/advanced-custom-fields-display-google-map-on-your-theme
C) Anfänger Tutorial samt Anleitung zum Einbinden:
http://code.tutsplus.com/tutorials/getting-started-with-advanced-custom-fields–cms-22126

Pin It on Pinterest

Share This