Erstellen einer „Meet The Team“-Seite in WordPress

Das Folgende ist ein Gastbeitrag von Kevin Leary. Ich war ziemlich begeistert, diesen Gastbeitrag von Kevin zu erhalten, weil es meine Art von Tutorial ist: praktisch und detailliert.

Fast jedes benutzerdefinierte Theme, das ich mit WordPress entwickle, erfordert eine Management Team- oder Meet the Team-Seite. Wenn ich raten müsste, würde ich sagen, dass ich ungefähr 50 verschiedene Setups gebaut habe. Mir ist klar geworden, dass es viele andere WordPress-Entwickler da draußen geben muss, die ebenfalls ähnliche Systeme erstellen. Aus diesem Grund werde ich den Ansatz teilen, den ich typischerweise verwende, um eine „Meet The Team“-Seite in WordPress zu erstellen und zu verwalten.

Wer nur das fertige Produkt sehen möchte, findet die PHP-Klasse auf Github oder ein Beispiel.

Beispiel ansehen   Repo auf Github

Das Erstellen und Verwalten einer Teamseite wie dieser in WordPress beinhaltet die folgende Kombination von Tools

• Benutzerdefinierter Beitragstyp (z.B. team)
• Benutzerdefinierte Taxonomie zum Filtern (z.B. department)
• Eine Meta-Box-Benutzeroberfläche zur Verwaltung benutzerdefinierter Felder (z.B. Position, E-Mail, Telefon und Social-Media-Links)

Anhand dieser Tools gehen wir den Prozess der Erstellung eines Meet Our Team-Templates für ein benutzerdefiniertes WordPress-Theme durch.

Zuerst & Vor allem

Bevor wir beginnen, sollte ich einige Dinge klären. Im Github-Beispiel für dieses Tutorial verwende ich einen objektorientierten Ansatz und habe meinen Code in einer separaten .php-Datei gespeichert, die ich typischerweise in der functions.php-Datei eines Themes einfüge.

Der Übersichtlichkeit halber werde ich den Prozess schrittweise prozedural beschreiben und mich darauf beziehen, dies stattdessen in Ihrer functions.php einzurichten.

Beitragstyp & Taxonomie erstellen

Der erste Schritt ist die Registrierung eines neuen Beitragstyps (z.B. team). Sie können auch eine Taxonomie (z.B. department) registrieren, falls Filterung oder Kategorisierung erforderlich ist.

Dieser Beitragstyp fügt ein neues Menü Team-Profile zum WordPress-Admin hinzu, das alle Teambeiträge von Beiträgen und Seiten trennt, um die Inhaltsverwaltung zu erleichtern.

Die Taxonomie fügt den Teambeiträgen eine benutzerdefinierte Kategorie hinzu, mit der Sie Ihr Team filtern oder kategorisieren können. Ich finde, das ist angemessen, wenn Sie ein Team von mehr als zehn Personen haben. Es ist oft nützlich, um Mitarbeiter nach Standort oder Abteilung zu filtern.

Beitragstyp

/**
 * Register `team` post type
 */
function team_post_type() {
   
   // Labels
    $labels = array(
        'name' => _x("Team", "post type general name"),
        'singular_name' => _x("Team", "post type singular name"),
        'menu_name' => 'Team Profiles',
        'add_new' => _x("Add New", "team item"),
        'add_new_item' => __("Add New Profile"),
        'edit_item' => __("Edit Profile"),
        'new_item' => __("New Profile"),
        'view_item' => __("View Profile"),
        'search_items' => __("Search Profiles"),
        'not_found' =>  __("No Profiles Found"),
        'not_found_in_trash' => __("No Profiles Found in Trash"),
        'parent_item_colon' => ''
    );
    
    // Register post type
    register_post_type('team' , array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => false,
        'menu_icon' => get_stylesheet_directory_uri() . '/lib/TeamProfiles/team-icon.png',
        'rewrite' => false,
        'supports' => array('title', 'editor', 'thumbnail')
    ) );
}
add_action( 'init', 'team_post_type', 0 );

Optionale Taxonomie

/**
 * Register `department` taxonomy
 */
function team_taxonomy() {
    
    // Labels
    $singular = 'Department';
    $plural = 'Departments';
    $labels = array(
        'name' => _x( $plural, "taxonomy general name"),
        'singular_name' => _x( $singular, "taxonomy singular name"),
        'search_items' =>  __("Search $singular"),
        'all_items' => __("All $singular"),
        'parent_item' => __("Parent $singular"),
        'parent_item_colon' => __("Parent $singular:"),
        'edit_item' => __("Edit $singular"),
        'update_item' => __("Update $singular"),
        'add_new_item' => __("Add New $singular"),
        'new_item_name' => __("New $singular Name"),
    );

    // Register and attach to 'team' post type
    register_taxonomy( strtolower($singular), 'team', array(
        'public' => true,
        'show_ui' => true,
        'show_in_nav_menus' => true,
        'hierarchical' => true,
        'query_var' => true,
        'rewrite' => false,
        'labels' => $labels
    ) );
}
add_action( 'init', 'team_taxonomy', 0 );

Meta-Box für benutzerdefinierte Felder

Jetzt, da wir ein neues Menü Team-Profile in WordPress haben, müssen wir die Daten anpassen, die wir bei jedem Teambeitrag speichern. Meiner Erfahrung nach haben die meisten Teamprofile die folgenden Felder

• Position
• E-Mail
• Telefon
• Twitter
• LinkedIn

Um diesen Inhalt zu verwalten, passe ich gerne die Benutzeroberfläche Neu hinzufügen und Bearbeiten für den Beitragstyp Team an, damit Site-Admins und Autoren diese Informationen ohne Schulung intuitiv aktualisieren können.

Mein bevorzugtes Tool zum Erstellen von Meta-Box-Benutzeroberflächen für benutzerdefinierte Felder ist derzeit das Advanced Custom Fields (ACF)-Plugin.

Um diese Meta-Box zu erstellen, müssen Sie das ACF-Plugin installieren und Ihre Felder unter dem Admin-Menü Benutzerdefinierte Felder erstellen. Unten sehen Sie die Felder und Einstellungen, die ich für dieses Tutorial verwendet habe.

Wenn Sie faul sind wie ich, können Sie meine XML-Exportdatei importieren, um den Erstellungsprozess der Felder zu automatisieren. So geht's:

1. Laden Sie meinen Export der Feldgruppe „Team Details“ herunter: acf-export-team-details.xml.zip
2. Navigieren Sie zu Tools » Importieren und wählen Sie WordPress
3. Installieren Sie das WP-Import-Plugin, wenn Sie dazu aufgefordert werden
4. Laden Sie die .xml-Datei hoch und importieren Sie sie
5. Wählen Sie Ihren Benutzer aus und ignorieren Sie „Import Attachments“
6. Das ist alles!

Das ACF-Plugin speichert seine Daten in einem benutzerdefinierten Beitragstyp, sodass das Standard-WordPress-XML-Importtool verwendet werden kann. Ziemlich clever vom Plugin-Autor, Elliot Condon.

Extras

In meiner PHP-Klasse habe ich einen Admin-Hinweis hinzugefügt, der Sie auffordert, das ACF-Plugin zu installieren, falls Sie dies noch nicht getan haben. Dies ist eine nette Erinnerung daran, dass Sie es benötigen, damit der Beitragstyp Team ordnungsgemäß funktioniert.

Benutzerdefiniertes Template

Nachdem wir unser Team-Management-System eingerichtet haben, müssen wir unsere Team-Profile irgendwo auf der Website ausgeben. Dazu erstelle ich normalerweise ein benutzerdefiniertes Theme-Template (z.B. template-team.php), das die Ansicht für eine bestimmte WordPress-Seite ändert. Einzelheiten zu benutzerdefinierten Templates finden Sie in der Dokumentation auf WordPress.org.

Loop zum Anzeigen von Teambeiträgen

Um unsere Teambeiträge in unserem benutzerdefinierten Template auszugeben, verwenden wir den folgenden Code.

 'team',
    'posts_per_page' => -1, // Unlimited posts
    'orderby' => 'title', // Order alphabetically by name
) );

if ( $team_posts ):
?>

Meet The Team

„Einzelpersonen können und tun einen Unterschied, aber es braucht ein Team,
um die Dinge wirklich durcheinander zu bringen.“

ID) ) { $src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘team-thumb’ ); $thumb_src = $src[0]; } ?>

Um eine Schleife unserer team-Beiträge zu erhalten, habe ich die Funktion get_posts verwendet. Es ist einfach, leicht zu bedienen und effizient. Ich habe die folgenden Argumente verwendet, um die Abfrageergebnisse anzusprechen und zu organisieren

• 'post_type' => 'team' fragt nur Teambeiträge ab
• 'posts_per_page' => 50 gibt alle unsere Teamprofile zurück, vorausgesetzt, Sie haben weniger als 50. Wenn Sie mehr planen, passen Sie dies entsprechend an.
• 'orderby' => 'title' ordnet die Ergebnisse nach Name
• 'order' =>; 'ASC' beginnt die alphabetische Reihenfolge

Sobald wir unser Abfrageobjekt haben, durchlaufen wir jeden Teambeitrag und geben Daten und Inhalte in unsere HTML-Struktur aus.

Die Funktionen get_field und the_field sind im ACF-Plugin integriert. Dies sind wahrscheinlich die beiden am häufigsten verwendeten Funktionen, die Sie bei der Arbeit damit finden werden. Sie geben den Wert eines bestimmten benutzerdefinierten Feldes aus.

Sobald die Schleife abgeschlossen ist, können wir eine neue Seite in WordPress erstellen und Team aus dem Dropdown-Menü der benutzerdefinierten Templates auswählen. Wenn Sie diese Seite anzeigen, sollten Sie eine Liste der Profile Ihres Teams sehen.

Anmerkungen zur Performance

Ohne jegliches Caching fügt dieser Code-Abschnitt satte 26 Abfragen zur Seite hinzu. Wenn Sie eine Website mit hohem Datenverkehr haben, ist es erforderlich, die Transients API zu nutzen, um die Ausgabe einer solch intensiven benutzerdefinierten Abfrage zwischenzuspeichern. Ich habe eine statische display()-Methode in meine PHP-Klasse aufgenommen, die das Transienten-Caching übernimmt.

if ( $team_profiles = TeamProfiles::display() )
  echo $team_profiles;

Die display()-Methode verwendet Ausgabepufferung und Transienten-Caching, um das von unserer Team-Schleife generierte HTML zu speichern und zwischenzuspeichern.

Die Verwendung dieses Ansatzes anstelle unserer vorherigen Schleife reduziert die Anzahl der Abfragen auf 1, wodurch wir 25 Zugriffe auf die Datenbank sparen. Dies reduziert auch die anfängliche Seitenladezeit um 400-500 ms. Nicht schlecht!

Styling des Templates mit CSS

Nachdem wir nun unser Teamseiten-Verwaltungssystem eingerichtet und unsere HTML-Struktur ausgegeben haben, müssen wir unserem neuen Template etwas Stil verleihen.

CSS bedingt laden

Um ein Stylesheet nur für unser benutzerdefiniertes Template (template-team.php) einzubinden, können wir die folgende bedingte Überprüfung verwenden.

/**
 * Load CSS for template-team.php
 */
function team_styles() {
    if ( is_page_template('template-team.php') )
    wp_enqueue_style( 'team-template', get_stylesheet_directory_uri() . '/assets/css/team.css' );
}
add_action( 'wp_enqueue_scripts', 'team_styles', 101 );

Dadurch wird eine CSS-Datei (/assets/css/team.css) in die Warteschlange gestellt, wenn template-team.php verwendet wird. Diese Methode hilft, Ihr Kern-Stylesheet schlank zu halten.

Beispiel-Styles

Hier sind die Styles, die ich für das Beispiel verwendet habe, das dieses Tutorial begleitet

/* ==============================================
   Team profiles
   ============================================== */
.profiles {
  margin-bottom: -20px;
}
.intro {
  padding-left: 140px;
}
.intro h2 {
  margin: 0 0 7px;
}
.intro .lead {
  line-height: 120%;
  font-size: 1.1em;
  font-style: italic;
  margin: 0 0 35px;
}
.profile {
  position: relative;
  margin: 0 0 20px;
}
.profile:nth-child(even) {
  clear: left;
}
.profile-header {
  position: absolute;
  top: 0;
}
.profile-header img {
  float: left;
}
.profile-content {
  font-size: 14px;
  padding: 27px 20px 0 0;
  line-height: 1.4em;
  margin: 0 0 0 125px;
}
.profile-content h3 {
  margin: 0;
}
.profile-content .lead {
  font-size: 1.3em;
  line-height: 100%;
  font-style: italic;
  margin: 3px 0 20px;
}
.profile-content:before {
  content: '';
  width: 36px;
  height: 3px;
  background: #dededc;
  position: absolute;
  top: 0;
}
.profile-content p {
  margin: 0 0 10px;
}
.profile-footer {
  position: absolute;
  top: 121px;
  width: 100px;
  text-align: center;
}
.profile-footer a {
  line-height: 18px;
  margin: 0 3px;
  display: inline-block;
}
.profile-footer a:hover i {
  color: #595959;
}
.profile-footer a:active i {
  color: #000;
}
.profile-footer i {
  font-size: 18px;
  position: relative;
}
.profile-footer i.icon-envelope {
  font-size: 16px;
  top: -1px;
}
.profile-footer i.icon-linkedin {
  font-size: 16px;
  top: -1px;
}

In meinem Projekt-Workflow verwende ich LESS, um mein CSS vorzuverarbeiten. Wenn Sie LESS in Ihrem Projekt verwenden möchten, finden Sie unten das CSS im LESS-Format.

/* ==================================================
   Team profiles
   ================================================== */
  
// Mixins
.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

// Global
.profiles {
    margin-bottom: -20px; // Offset adjustment
}
.intro {
    padding-left: 140px;
    h2 {
        margin: 0 0 7px;
    }
    .lead {
        line-height: 120%;
        font-size: 1.1em;
        font-style: italic;
        margin: 0 0 35px;
    }
}
.profile {
    position: relative;
    margin: 0 0 20px;
    &:nth-child(even) {
        clear: left;
    }
}

// Header
.profile-header {
    position: absolute;
    top: 0;
    img {
        float: left;
    }
}

// Content
.profile-content {
    font-size: 14px;
    padding: 27px 20px 0 0;
    line-height: 1.4em;
    margin: 0 0 0 125px;
    h3 {
        margin: 0;
    }
    .lead {
        font-size: 1.3em;
        line-height: 100%;
        font-style: italic;
        margin: 3px 0 20px;
    }
    // Top separator
    &:before {
        content: '';
        width: 36px;
        height: 3px;
        background: #dededc;
        position: absolute;
        top: 0;
    }
    p {
        margin: 0 0 10px;
    }
}

// Footer
.profile-footer {
    position: absolute;
    top: 121px;
    width: 100px;
    text-align: center;
    a {
        line-height: 18px;
        margin: 0 3px;
        display: inline-block;
    }
    a:hover i { color: #595959; }
    a:active i { color: #000; }
    i {
        font-size: 18px;
        position: relative;
    }
    i.icon-envelope {
        font-size: 16px;
        top: -1px;
    }
    i.icon-linkedin {
        font-size: 16px;
        top: -1px;
    }
}

Fantastisch, Sie haben es geschafft!

Vielen Dank fürs Lesen. Ich hoffe, dieses Tutorial vermittelt Ihnen ein solides Verständnis dafür, wie Sie ein Team-Bio-/Meet-the-Team-/Teamprofil-Managementsystem in WordPress erstellen. Wenn Sie die in diesem Artikel erläuterten zugrunde liegenden Konzepte verstehen, sollten Sie nun einen wertvollen neuen Ansatz zur Verwaltung benutzerdefinierter Inhalte in WordPress haben.

Benutzerdefinierte Beitragstypen, Taxonomien und Meta-Box-verwaltete benutzerdefinierte Felder bieten einen leistungsstarken Ansatz zur Verwaltung vieler komplexer WordPress-CMS-Szenarien.