Entwickeln von BuddyPress-Designs - Teil 1: BuddyPress-API und -Schleifen

German (Deutsch) translation by Valentina (you can also view the original English article)

Im letzten Monat haben wir uns mit den Grundlagen von BuddyPress befasst und wie Sie damit die sozialen Netzwerke in Ihren Projekten verbessern können. Die Resonanz war großartig und viele forderten Thematische Tutorials an. In dieser dreiteiligen Serie werden einige Kernelemente der BuddyPress-API erläutert und das Erstellen eines benutzerdefinierten untergeordneten Themes entpackt, das sowohl BuddyPress- als auch WordPress-Updates überlebt.

Da immer mehr Kunden nach sozialen Netzwerken suchen, haben wir uns mit den Grundlagen von BuddyPress und den Auswirkungen befasst, die dies auf Ihre Projekte haben kann. Jetzt möchten wir uns mit der Entwicklung von untergeordneten Themen befassen, die auf Ihre Bedürfnisse zugeschnitten sind und Aktualisierungen sowohl für BuddyPress als auch für WordPress enthalten. Kürzlich habe ich im Thema-Repository nach BuddyPress-kompatiblen Themen gesucht und dabei satte 19 Ergebnisse erzielt! Es ist unnötig zu erwähnen, dass dies ein Markt ist, der eine gewisse Entwicklung gebrauchen könnte. Es gibt zwar Plugins, mit denen Sie Ihre Themen mit BuddyPress kompatibel machen können, aber ich bin immer ein Befürworter des Verständnisses, wie man etwas selbst macht, und verlasse mich nicht ausschließlich auf Plugins. Darüber hinaus ist das Erstellen eines grundlegenden untergeordneten Themes ein unkomplizierter Prozess, den Sie lernen sollten, wenn Sie mit BuddyPress entwickeln möchten.

Was werden wir tun?

In diesem Tutorial werde ich Sie durch einige Kernelemente der BuddyPress-API und durch die grundlegenden Schritte zum Erstellen eines benutzerdefinierten untergeordneten BuddyPress-Themes führen. Am Ende dieses Tutorials sollten Sie verstehen können:

Verwendung von BuddyPress-Vorlagen-Tags
Erkennen und Anpassen von BuddyPress-Schleifen
So verwenden Sie BuddyPress-Bedingungen in Ihren Themen
So erstellen und bearbeiten Sie ein untergeordnetes BuddyPress-Thema

Dieses Tutorial bildet die Grundlage für die nächsten beiden Teile, die detailliertere Techniken für die Arbeit mit bestimmten Elementen in BuddyPress wie Gruppen und Foren enthalten.

Beginnend mit der BuddyPress-API

Wenn Sie mit WordPress gearbeitet haben, wissen Sie, wie wichtig es ist, zu verstehen, wie man mit seinen spezifischen Funktionen, Aktionen, Hooks und Filtern arbeitet. Sie haben auch festgestellt, dass Ihre Projekte schneller ablaufen, wenn Sie diese Dinge besser verstehen, und Sie sich eingehender mit dem Anpassen von Themen und Plugins befassen können. Bei BuddyPress ist nichts anders.

Ich möchte Sie zunächst durch einige Schlüsselelemente der BuddyPress-API führen: Vorlagen-Tags, Schleifen und Bedingungen. Ich hoffe, dass Sie, wenn wir diese Elemente untersuchen und dann ein untergeordnetes Thema erstellen, das hier Geschriebene verwenden und es anwenden können, um Ihre eigenen benutzerdefinierten untergeordneten BuddyPress-Themen zu erstellen.

Arbeiten mit BuddyPress-Vorlagen-Tags

Schauen wir uns zunächst die BuddyPress-Funktionen an, die für die Themenentwicklung von zentraler Bedeutung sind - Vorlagen-Tags. Der BuddyPress-Codex enthält auch hier eine Liste davon als Referenz. Diese Vorlagen-Tags sind für die Anpassung Ihrer Themen von entscheidender Bedeutung. Wie Dan Davies in seinem kürzlich erschienenen Artikel wp.tutsplus vorgeschlagen hat, sollten Sie einige davon auf der Kurzwahl haben, wenn Sie in ThemyPress viel Themenentwicklung durchführen möchten. Einige davon sind genau die gleichen wie die Vorlagen-Tags in Wordpress, was Ihnen auch Zeit sparen sollte, wenn Sie Erfahrung mit dem Entwerfen von Vorlagen in WordPress haben.

Hier ist eine kurze Liste einiger Vorlagen-Tags von Kopf- bis Fußzeile, die Sie für Ihre Themenentwicklung verwenden können:

Header und Navigation

get_header() - das gleiche Template-Tag wie WordPress. Dies schließt die Datei header.php Ihres Themas ein.
bp_get_loggedin_user_nav() - Zeigt Site-Navigationslinks für angemeldete Benutzer an. Außerdem wird dem angezeigten Navigationselement eine "aktuell ausgewählte" Klasse hinzugefügt, sodass Sie ein benutzerdefiniertes CSS erstellen können, um die Anzeige dieses Listenelements zu ändern.

Post- und Inhaltsformatierung

Diese Vorlagen-Tags sind dieselben Tags, die zum Formatieren und Anzeigen von Inhalten in WordPress verwendet werden. Sie arbeiten auch in derselben WordPress-Schleife. Um ein Beispiel dafür in Aktion zu sehen, öffnen Sie das bp-default-Design und öffnen Sie index.php. Die Zeilen 15-61 geben ein großartiges Beispiel für die WordPress-Schleife bei der Arbeit in BuddyPress.

the_content()
the_excerpt
the_tags()
the_category()

Benutzer- und Mitgliederinformationen

Um diese Tags in Aktion zu sehen, öffnen Sie die Mitglieder/member-loop.php und die Mitglieder/single.php in bp-default.

bp_loggedin_user_avatar() - Zeigt den aktuell angemeldeten Avatar des Benutzers an.
bp_loggedin_user_domain() - gibt die aktuell angemeldete Benutzer-URL wieder.
bp_member_permalink - gibt die URL der Profilseite eines Mitglieds wieder.
bp_member_avatar - Zeigt den Avatar eines Mitglieds an. Dies kann in der Member-Schleife verwendet werden, um eine globale Liste von Benutzern zu erstellen.
bp_get_user_firstname()
bp_group_member_joined_since()

Gruppen

Um diese Tags in Aktion zu sehen, öffnen Sie die Gruppen/groups-loop.php und groups/single.php in bp-default.

bp_group_permalink() - Gibt einen Link zur Homepage einer bestimmten Gruppe wieder.
bp_group_avatar() - Zeigt den Avatar einer Gruppe an.
bp_group_description_excerpt() - Zeigt die vom Gruppenadministrator angegebene Gruppenbeschreibung an.
bp_get_group_name() -

Aktivität

bp_sitewide_activity_feed_link() - Gibt den Link für den RSS-Aktivitätsfeed der Site wieder.

Suchformulare

bp_directory_groups_search_form() - Zeigt ein Suchformular an, das alle öffentlichen Gruppen und ihre Aktivitäten durchsucht.
bp_directory_forums_search_form() - Zeigt ein Suchformular an, das Suchvorgänge basierend auf dem Inhalt des Forums ermöglicht.
bp_directory_members_search_form() - Zeigt ein Suchformular an, das Suchen basierend auf Inhalten und Informationen der Mitglieder ermöglicht.

Beinhaltet

locate_template() - Dies wird verwendet, um Vorlagen wie die Seitenleiste und Suchformulare einzuschließen. Um die Seitenleiste einzuschließen, sieht es so aus:
1

<?php locate_template( array( 'sidebar.php' ), true ) ;?>
Sie können dieses Vorlagen-Tag auch zum Anzeigen von Suchformularvorlagen verwenden. Suchen Sie dazu in Aktion nicht weiter als bis zur Datei index.php von bp-default.

Seitennummerierung

bp_groups_pagination_count()
bp_groups_pagination_links()
bp_members_pagination_count()
bp_members_pagination_links()
bp_activity_pagination_count()
bp_activity_pagination_links()

Zusätzlich zu diesen existieren andere Paginierungsvorlagen-Tags für verschiedene Inhaltstypen. Ersetzen Sie einfach das Wort "Gruppen" in den obigen Vorlagen-Tags durch die Wörter: Forum, Blogs, Gruppenmitglieder oder Nachrichten, um die Links oder die Anzahl der von Ihnen verwendeten Schleifen einzuschließen. Diese Schleifen werden nachstehend eingehender untersucht.

Fusszeile

get_footer()

Arbeiten mit BuddyPress-Loops

Wie oben bereits erwähnt, können Sie die Standard-WordPress-Schleife in Ihren Themen verwenden, um Beiträge anzuzeigen und Metainhalte zu veröffentlichen. BuddyPress enthält auch eigene Schleifen, die jeweils für die Anzeige von BuddyPress-spezifischen Inhaltstypen verantwortlich sind. BuddyPress enthält Schleifen für: Gruppen, Mitglieder, Aktivitätsdatenstrom, Forenthemen, Blogs, Gruppenmitglieder, private Nachrichten und Profildaten. Während jede davon der Standard-WordPress-Schleife sehr ähnlich sieht, hat jede ihre eigenen spezifischen Variablen, die auch eine größere Anpassung ermöglichen.

Stellen Sie sicher, dass Sie in die bp-Standard-Themendateien eintauchen, um ein besseres Verständnis der Schleifen und ihrer spezifischen Verwendung zu erhalten. Jeder der Inhaltstypen verfügt über einen Ordner, in dem sich die jeweilige Schleifendatei befindet.

Schauen wir uns einen Überblick über jeden einzelnen an und einige spezifische Möglichkeiten, wie Sie die Anzeige anpassen können.

Gruppenschleife

Die Gruppenschleife wird verwendet, um eine Liste von Site-Gruppen anzuzeigen. Die Schleife sieht folgendermaßen aus:

	
	<?php if ( bp_has_groups() ) : ?>
 
    <div class="pagination">
 
        <div class="pag-count" id="group-dir-count">
            <?php bp_groups_pagination_count() ?>
        </div>
 
        <div class="pagination-links" id="group-dir-pag">
            <?php bp_groups_pagination_links() ?>
        </div>
 
    </div>
 
    <ul id="groups-list" class="item-list">
    <?php while ( bp_groups() ) : bp_the_group(); ?>
 
        <li>
            <div class="item-avatar">
                <a href="<?php bp_group_permalink() ?>"><?php bp_group_avatar( 'type=thumb&width=50&height=50' ) ?></a>
            </div>
 
            <div class="item">
                <div class="item-title"><a href="<?php bp_group_permalink() ?>"><?php bp_group_name() ?></a></div>
                <div class="item-meta"><span class="activity"><?php printf( __( 'active %s ago', 'buddypress' ), bp_get_group_last_active() ) ?></span></div>
 
                <div class="item-desc"><?php bp_group_description_excerpt() ?></div>
 
                <?php do_action( 'bp_directory_groups_item' ) ?>
            </div>
 
            <div class="action">
                <?php bp_group_join_button() ?>
 
                <div class="meta">
                    <?php bp_group_type() ?> / <?php bp_group_member_count() ?>
                </div>
 
                <?php do_action( 'bp_directory_groups_actions' ) ?>
            </div>
 
            <div class="clear"></div>
        </li>
 
    <?php endwhile; ?>
    </ul>
 
    <?php do_action( 'bp_after_groups_loop' ) ?>
 
<?php else: ?>
 
    <div id="message" class="info">
        <p><?php _e( 'There were no groups found.', 'buddypress' ) ?></p>
    </div>
 
<?php endif; ?>

Die folgenden Parameter sind beim Anpassen der Gruppenschleife am nützlichsten:

type - Standardmäßig ist dies auf aktive gesetzt, kann aber auch Folgendes akzeptieren: Neueste, Beliebteste, Zufällige, Alphabetische, Die meisten Forenthemen, Die meisten Forenbeiträge.
per_page - Standardmäßig zeigt die BuddyPress-Schleife 10 Gruppen pro Seite an. Durch Eingabe einer neuen Nummer können Sie dies jedoch ändern.
user_id - Durch Angabe einer Benutzer-ID werden nur die Gruppen angezeigt, zu denen der Benutzer gehört. Um beispielsweise nur die Gruppen anzuzeigen, zu denen der aktuell angemeldete Benutzer gehört, lautet der Code wie folgt:

Schauen wir uns eine Beispielschleife an, die mit den oben genannten Parametern angepasst wurde. Geben Sie direkt nach der öffnenden Klammer Folgendes ein:

		
$args = array(
     'type' => 'popular',
     'max' => 5,
     'user_id' => $user_id
	);
	
if ( bp_has_groups ( $args ) ) { ...

Da wir mehrere Argumente verwenden, habe ich eine Variable namens args eingerichtet, die ein Array verarbeiten kann. Ich habe dann den Typ auf beliebt, das Maximum pro Seite auf 5 und die Benutzer-ID auf die aktuell angemeldete Benutzer-ID gesetzt. Dadurch werden die fünf beliebtesten Gruppen angezeigt, zu denen das aktuelle Mitglied gehört, und der Rest wird paginiert.

Mitgliederschleife

Die Mitgliederschleife wird verwendet, um eine Liste der aktuellen Mitglieder anzuzeigen. Die Standard-Mitgliederschleife sieht folgendermaßen aus:

	
	<?php if ( bp_has_members() ) : ?>
 
    <div class="pagination">
 
        <div class="pag-count" id="member-dir-count">
            <?php bp_members_pagination_count() ?>
        </div>
 
        <div class="pagination-links" id="member-dir-pag">
            <?php bp_members_pagination_links() ?>
        </div>
 
    </div>
 
    <?php do_action( 'bp_before_directory_members_list' ) ?>
 
    <ul id="members-list" class="item-list">
    <?php while ( bp_members() ) : bp_the_member(); ?>
 
        <li>
            <div class="item-avatar">
                <a href="<?php bp_member_permalink() ?>"><?php bp_member_avatar() ?></a>
            </div>
 
            <div class="item">
                <div class="item-title">
                    <a href="<?php bp_member_permalink() ?>"><?php bp_member_name() ?></a>
                    <?php if ( bp_get_member_latest_update() ) : ?>
                        <span class="update"> - <?php bp_member_latest_update( 'length=10' ) ?></span>
                    <?php endif; ?>
                </div>
                <div class="item-meta"><span class="activity"><?php bp_member_last_active() ?></span></div>
 
                <?php do_action( 'bp_directory_members_item' ) ?>
 
                <?php
                 /***
                  * If you want to show specific profile fields here you can,
                  * but it'll add an extra query for each member in the loop
                  * (only one regadless of the number of fields you show):
                  *
                  * bp_member_profile_data( 'field=the field name' );
                  */
                ?>
            </div>
 
            <div class="action">
                <?php do_action( 'bp_directory_members_actions' ) ?>
            </div>
 
            <div class="clear"></div>
        </li>
 
    <?php endwhile; ?>
    </ul>
 
    <?php do_action( 'bp_after_directory_members_list' ) ?>
 
    <?php bp_member_hidden_fields() ?>
 
<?php else: ?>
 
    <div id="message" class="info">
        <p><?php _e( "Sorry, no members were found.", 'buddypress' ) ?></p>
    </div>
 
<?php endif; ?>

Um tiefer zu gehen, lassen Sie uns diesen Code ein wenig aufschlüsseln. Die erste und die letzte Zeile sind wichtig und weisen BuddyPress an, den Rest unseres Codes nur anzuzeigen, wenn Mitglieder anwesend sind, die angezeigt werden sollen.

	
	<?php if ( bp_has_members() ) : ?>
	
	...
	
	<?php endif; ?>

Als nächstes haben wir unsere Mitglieder-Paginierungsvorlagen-Tags. Es gibt auch Vorlagen-Tags für andere Paginierungen von Inhaltstypen wie Gruppen und Blogs. Diese sind oben als Referenz geschrieben.

	
	 <div class="pagination">
 
        <div class="pag-count" id="member-dir-count">
            <?php bp_members_pagination_count() ?>
        </div>
 
        <div class="pagination-links" id="member-dir-pag">
            <?php bp_members_pagination_links() ?>
        </div>
 
    </div>

Wie Sie sehen können, kann jede Schleife in Teile zerlegt werden, die mehr über Vorlagen-Tags und deren Verwendung enthüllen. Allein in dieser Schleife sehen wir die Vorlagen-Tags: bp_member_profile_data, bp_member_permalink, bp_member_avatar und bp_member_latest_update.

Das Argument bp_has_members() enthält mehrere Parameter, die angepasst werden können, um die angezeigte Mitgliederliste zu ändern. Die nützlichsten sind:

type - Gibt standardmäßig aktive Benutzer zurück. Andere Argumente sind: neueste, beliebt, online, alphabetisch, zufällig.
per_page
max
user_id - Wenn dies angegeben ist, werden nur die Benutzer zurückgegeben, die Freunde der angegebenen Benutzernummer sind.

Aktivitäts-Stream-Schleife

	
	<?php if ( bp_has_activities() ) : ?>
 
    <div class="pagination">
        <div class="pag-count"><?php bp_activity_pagination_count() ?></div>
        <div class="pagination-links"><?php bp_activity_pagination_links() ?></div>
    </div>
 
    <ul id="activity-stream" class="activity-list item-list">
 
    <?php while ( bp_activities() ) : bp_the_activity(); ?>
 
        <li class="<?php bp_activity_css_class() ?>" id="activity-<?php bp_activity_id() ?>">
 
            <div class="activity-avatar">
                <a href="<?php bp_activity_user_link() ?>">
                    <?php bp_activity_avatar( 'type=full&width=100&height=100' ) ?>
                </a>
            </div>
 
            <div class="activity-content">
 
                <div class="activity-header">
                    <?php bp_activity_action() ?>
                </div>
 
                <?php if ( bp_get_activity_content_body() ) : ?>
                    <div class="activity-inner">
                        <?php bp_activity_content_body() ?>
                    </div>
                <?php endif; ?>
 
                <?php do_action( 'bp_activity_entry_content' ) ?>
 
            </div>
        </li>
 
    <?php endwhile; ?>
 
    </ul>
 
<?php else : ?>
    <div id="message" class="info">
        <p><?php _e( 'Sorry, there was no activity found. Please try a different filter.', 'buddypress' ) ?></p>
    </div>
<?php endif; ?>

Hilfreiche Parameter für die Aktivitätsstromschleife sind:

display_comments - Wenn diese Option auf "true" gesetzt ist, werden Kommentare zur Aktivität angezeigt.
per_page - legt hier erneut fest, wie viele Aktivitäten vor der BuddyPress-Paginierung angezeigt werden sollen.

Weitere hilfreiche Tipps zum Filtern von Aktivitäten auf der gesamten Website und zum Hinzufügen von Unterstützung für Kommentare finden Sie auf der Seite mit der Aktivitäts-Stream-Schleife im BuddyPress-Codex.

Forum Themenschleife

In der Forumthemenschleife wird unter anderem eine Liste der Forenthemen angezeigt, die zuletzt zum Theme gepostet haben und wie viele Beiträge das Theme insgesamt enthält. Die Schleife sieht folgendermaßen aus:

	
	<?php if ( bp_has_forum_topics() ) : ?>
 
    <div class="pagination">
 
        <div id="post-count" class="pag-count">
            <?php bp_forum_pagination_count() ?>
        </div>
 
        <div class="pagination-links" id="topic-pag">
            <?php bp_forum_pagination() ?>
        </div>
 
    </div>
 
    <table class="forum">
 
        <tr>
            <th id="th-title"><?php _e( 'Topic Title', 'buddypress' ) ?></th>
            <th id="th-poster"><?php _e( 'Latest Poster', 'buddypress' ) ?></th>
 
            <?php if ( !bp_is_group_forum() ) : ?>
                <th id="th-group"><?php _e( 'Posted In Group', 'buddypress' ) ?></th>
            <?php endif; ?>
 
            <th id="th-postcount"><?php _e( 'Posts', 'buddypress' ) ?></th>
            <th id="th-freshness"><?php _e( 'Freshness', 'buddypress' ) ?></th>
        </tr>
 
        <?php while ( bp_forum_topics() ) : bp_the_forum_topic(); ?>
 
        <tr class="<?php bp_the_topic_css_class() ?>">
            <td class="td-title">
                <a class="topic-title" href="<?php bp_the_topic_permalink() ?>" title="<?php bp_the_topic_title() ?> - <?php _e( 'Permalink', 'buddypress' ) ?>">
                    <?php bp_the_topic_title() ?>
                </a>
            </td>
            <td class="td-poster">
                <a href="<?php bp_the_topic_permalink() ?>"><?php bp_the_topic_last_poster_avatar( 'type=thumb&width=20&height=20' ) ?></a>
                <div class="poster-name"><?php bp_the_topic_last_poster_name() ?></div>
            </td>
 
            <?php if ( !bp_is_group_forum() ) : ?>
                <td class="td-group">
                    <a href="<?php bp_the_topic_object_permalink() ?>"><?php bp_the_topic_object_avatar( 'type=thumb&width=20&height=20' ) ?></a>
                    <div class="object-name"><a href="<?php bp_the_topic_object_permalink() ?>" title="<?php bp_the_topic_object_name() ?>"><?php bp_the_topic_object_name() ?></a></div>
                </td>
            <?php endif; ?>
 
            <td class="td-postcount">
                <?php bp_the_topic_total_posts() ?>
            </td>
            <td class="td-freshness">
                <?php bp_the_topic_time_since_last_post() ?>
            </td>
        </tr>
 
        <?php endwhile; ?>
 
    </table>
 
<?php else: ?>
 
    <div id="message" class="info">
        <p><?php _e( 'Sorry, there were no forum topics found.', 'buddypress' ) ?></p>
    </div>
 
<?php endif;?>

Hilfreiche Parameter für die Forumthemenschleife sind:

type - Standardmäßig werden in der Schleife die neuesten oder neuesten Themen abgerufen. Sie können jedoch die folgenden Argumente verwenden: beliebte, nicht beantwortete Tags. Wenn Sie "Tags" wählen, müssen Sie auch bestimmte Suchbegriffe eingeben.
forum_id - Wenn Sie dies angeben, ziehen Sie Forenthemen nur aus der angegebenen Forum-ID.
search_terms - wird in Verbindung mit dem Typ "tags" verwendet, um nur bestimmte Themen nach Schlüsselwörtern zurückzugeben.

Blogs Loop

Die Blogs-Schleife wird verwendet, um eine Liste von Benutzerblogs anzuzeigen. Die Schleife sieht folgendermaßen aus:

	
	<?php if ( bp_has_blogs() ) : ?>
 
    <div class="pagination">
 
        <div class="pag-count" id="blog-dir-count">
            <?php bp_blogs_pagination_count() ?>
        </div>
 
        <div class="pagination-links" id="blog-dir-pag">
            <?php bp_blogs_pagination_links() ?>
        </div>
 
    </div>
 
    <ul id="blogs-list" class="item-list">
    <?php while ( bp_blogs() ) : bp_the_blog(); ?>
 
        <li>
            <div class="item-avatar">
                <a href="<?php bp_blog_permalink() ?>"><?php bp_blog_avatar('type=thumb') ?></a>
            </div>
 
            <div class="item">
                <div class="item-title"><a href="<?php bp_blog_permalink() ?>"><?php bp_blog_name() ?></a></div>
                <div class="item-meta"><span class="activity"><?php bp_blog_last_active() ?></span></div>
 
                <?php do_action( 'bp_directory_blogs_item' ) ?>
            </div>
 
            <div class="action">
                <div class="generic-button blog-button visit">
                    <a href="<?php bp_blog_permalink() ?>" class="visit" title="<?php _e( 'Visit Blog', 'buddypress' ) ?>"><?php _e( 'Visit Blog', 'buddypress' ) ?></a>
                </div>
 
                <div class="meta">
                    <?php bp_blog_latest_post() ?>
                </div>
 
                <?php do_action( 'bp_directory_blogs_actions' ) ?>
            </div>
 
            <div class="clear"></div>
        </li>
 
    <?php endwhile; ?>
    </ul>
 
    <?php do_action( 'bp_after_directory_blogs_list' ) ?>
 
    <?php bp_blog_hidden_fields() ?>
 
<?php else: ?>
 
    <div id="message" class="info">
        <p><?php _e( 'Sorry, there were no blogs found.', 'buddypress' ) ?></p>
    </div>
 
<?php endif; ?>

Hilfreiche Parameter für die Blog-Schleife sind:

type - Standardmäßig werden aktive Blogs zurückgegeben. Sie können jedoch auch die folgenden Argumente verwenden: Neueste und Zufällige.
per_page

Gruppenmitgliederschleife

Diese Schleife wird verwendet, um Mitglieder einer bestimmten Gruppe anzuzeigen.

	
	<?php if ( bp_group_has_members() ) : ?>
 
  <div id="member-count" class="pag-count">
    <?php bp_group_member_pagination_count() ?>
  </div>
 
  <div id="member-pagination" class="pagination-links">
    <?php bp_group_member_pagination() ?>
  </div>
 
  <ul id="member-list" class="item-list">
  <?php while ( bp_group_members() ) : bp_group_the_member(); ?>
 
    <li>
      <!-- Example template tags you can use -->
      <?php bp_group_member_avatar() ?>
      <?php bp_group_member_link() ?>
      <?php bp_group_member_joined_since() ?>
    </li>
  <?php endwhile; ?>
  </ul>
 
<?php else: ?>
 
  <div id="message" class="info">
    <p>This group has no members.</p>
  </div>
 
<?php endif;?>

Private Nachrichtenschleife

Die Schleife für private Nachrichten wird verwendet, um einem Benutzer private Nachrichten anzuzeigen. Es enthält auch eine schöne Liste von Vorlagen-Tags, um die Anzeige anzupassen.

	
	 
  <div class="pagination-count">
    <?php bp_messages_pagination_count() ?>
  </div>
 
  <div class="pagination-links">
    <?php bp_messages_pagination() ?>
  </div>
 
  <ul id="message-threads">
  <?php while ( bp_message_threads() ) : bp_message_thread(); ?>
 
    <li>
      <!-- Example template tags you can use -->
      <?php bp_message_thread_id() ?>
      <?php bp_message_thread_has_unread() ?>
      <?php bp_message_thread_unread_count() ?>
      <?php bp_message_thread_avatar() ?>
      <?php bp_message_thread_from() ?>
      <?php bp_message_thread_last_post_date() ?>
      <?php bp_message_thread_view_link() ?>
      <?php bp_message_thread_subject() ?>
      <?php bp_message_thread_excerpt() ?>
      <?php bp_message_thread_delete_link() ?>
    </li>
  <?php endwhile; ?>
  </ul>
 
<?php else: ?>
 
  <div id="message" class="info">
    <p>There are no messages to display.</p>
  </div>  
 
<?php endif;?>

Profildatenschleife

Die Profildatenschleife wird verwendet, um die Profildaten des Benutzers anzuzeigen.

	
	<?php if ( bp_has_profile() ) : ?>
  <?php while ( bp_profile_groups() ) : bp_the_profile_group(); ?>
 
    <ul id="profile-groups">
    <?php if ( bp_profile_group_has_fields() ) : ?>
 
      <li>
        <?php bp_the_profile_group_name() ?>
 
        <ul id="profile-group-fields">
        <?php while ( bp_profile_fields() ) : bp_the_profile_field(); ?>
 
          <?php if ( bp_field_has_data() ) : ?>
          <li>
            <?php bp_the_profile_field_name() ?>
            <?php bp_the_profile_field_value() ?>
          </li>
          <?php endif; ?>
 
        <?php endwhile; ?>
        </ul>
      <li>
 
    <?php endif; ?>
    </ul>
 
  <?php endwhile; ?>
 
<?php else: ?>
 
  <div id="message" class="info">
    <p>This user does not have a profile.</p>
  </div>
 
<?php endif;?>

BuddyPress enthält zwar viele Schleifen, diese sind jedoch leicht zu verstehen und anzupassen. Wenn Sie sie studieren, sollten Sie auch besser verstehen, wie BuddyPress Vorlagen-Tags und -Bedingungen in seinem Standarddesign verwendet. Schauen wir uns nun an, wie BuddyPress bedingte Vorlagen-Tags verwendet.

Verwenden von bedingten Vorlagen-Tags

Bedingungen sind eine großartige Möglichkeit, um einfach und schnell benutzerdefinierte Themen zu entwickeln, die sich aufgrund bestimmter Bedingungen ändern. In BuddyPress beginnen diese Bedingungen mit: bp_is_ und werden verwendet, um bestimmte Inhalte auf bestimmten Seiten anzuzeigen. Wenn ich beispielsweise etwas Bestimmtes auf Gruppenhomepages anzeigen möchte, würde ich das folgende bedingte Vorlagen-Tag verwenden:

1
2	<?php if ( bp_is_group_home() ) : ?> Show this on group home pages <? endif; ?>

Mein bedingtes Vorlagen-Tag hier ist bp_is_group_home(). Um etwas nur auf Benutzerhomepages anzuzeigen, würde ich dasselbe wie oben tun, jedoch mit dem bedingten Vorlagen-Tag: bp_is_home oder bp_is_my_profile.

Eine umfassende Liste finden Sie hier.

Erstellen eines BuddyPress Child-Themas

Lassen Sie uns jetzt aus dem API-Gespräch aussteigen - Sie können aufstehen und sich bei Bedarf für eine Minute dehnen - und zu einer praktischen Anwendung übergehen. Wir versuchen erneut, die Grundlagen für unser benutzerdefiniertes Theme in Teil 2 und 3 zu schaffen. Schauen wir uns nun an, wie Sie ein untergeordnetes Theme für BuddyPress erstellen. Ich kann die Wichtigkeit davon nicht genug betonen. Lassen Sie mich einige persönliche Erfahrungen darüber teilen, wie wichtig dieser Punkt wirklich ist. Vor kurzem habe ich einen Anfängerfehler gemacht und die Kerndateien von BuddyPress direkt bearbeitet, ohne über Upgrades und neue Versionen nachzudenken. Ich wette, Sie können sich vorstellen, was als nächstes passiert ist. Das stimmt. Ich habe vergessen, es zu sichern, und die neue Version hat alle Arbeiten überschrieben, die ich in sie gesteckt hatte. Ich war ziemlich verblüfft und musste unnötige Stunden damit verbringen, das Chaos zu beheben. Um dies zu vermeiden, erfahren Sie hier, wie Sie ein untergeordnetes BuddyPress-Theme erstellen, das wir in den nächsten beiden Teilen dieser Lernserie bearbeiten und bearbeiten werden.

Legen Sie ein solides Fundament

Erstellen Sie zunächst einen neuen Ordner in Ihrem wp-content/themes/folder mit dem Namen cool-bp-theme. Dies wird unser BuddyPress-KinderTheme sein. Wenn Sie sich nicht sicher sind, was ein "untergeordnetes Theme" ist, stellen Sie es sich einfach als ein Theme vor, das weiterhin wie das bp-StandardTheme in wp-content/plugins/buddypress/bp-theme/bp-default/ funktioniert, ermöglicht jedoch die Bearbeitung und Anpassung und wird nicht unterbrochen, wenn Wordpress oder BuddyPress aktualisiert werden. Dazu werden nur die Vorlagendateien geändert, die sich in unserem untergeordneten Themenordner befinden. Es wird sogar das bp-Standard-Stylesheet verwendet, es können jedoch neue Stylesheets importiert oder Original-CSS in style.css überschrieben werden.

Nach dem Erstellen des neuen Ordners erstelle ich eine neue leere Datei functions.php (da ich davon ausgehe, dass einige Funktionen bearbeitet werden) und eine neue Datei style.css mit dem folgenden Code:

	
/*
Theme Name: Cool New BuddyPress Theme
Description: Cool new theme for BuddyPress.
Version: 1.0
Author: Adam Murray 
Author URI: http://twodoorscreative.com/
Template: bp-default
Tags: buddypress, two-column, light
*/

Das Kernelement, das sich hier unterscheidet, ist die Vorlagenzeile, in der ich dies mit dem bp-StandardTheme verknüpfe, wodurch es zu einem untergeordneten Theme wird. Ich möchte jetzt noch einen Schritt weiter gehen und die Standard-BP-Standard-Stylesheets importieren. Dazu gebe ich unter diesem Code Folgendes ein:

/* Inherit the default theme styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );
 
/* Inherit the default theme adminbar styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );

Jetzt haben Sie die Grundlagen eines untergeordneten BuddyPress-Themes. Wenn Sie in Ihrem Wordpress-Dashboard zu Darstellung --> Themen navigieren, wird das untergeordnete Theme angezeigt. Wenn Sie es aktivieren, sollten Sie genau sehen, was Sie sehen würden, wenn Sie bp-default aktivieren würden.

Duplizieren, verschieben und bearbeiten

Da das untergeordnete Theme jetzt aktiv ist, führen Sie zum Bearbeiten einer Vorlage einfach Folgendes aus:

Duplizieren Sie die zu bearbeitende Datei aus dem bp-Standarddesign.
Verschieben Sie die duplizierte Datei unter Beibehaltung des gleichen Dateinamens in unseren neuen untergeordneten Themenordner. Sie können die alte Datei auch in den neuen Themenordner kopieren.
Bearbeiten Sie die Datei. Während Sie bearbeiten, werden Sie sofort die Änderungen im Erscheinungsbild Ihres Themes bemerken.

Ein kurzes Beispiel dafür ist das Hinzufügen des benutzerdefinierten Header-Menüs, das ich im BuddyPress-Tutorial des letzten Monats unterrichtet habe.

Kopieren Sie header.php in Ihren neuen Themenordner.

Öffnen Sie die leere Datei functions.php, die Sie erstellt haben, und fügen Sie Folgendes hinzu:

		<php
		
		//Register Custom Menu

		function register_bp_default_menus() {
		  register_nav_menus(
		    array( 'header-menu' => ( 'Header Menu' ))
		  );
		}
		
		add_action( 'init', 'register_bp_default_menus' );
		
		?>

Öffnen Sie nun header.php und ersetzen Sie Zeile 79 durch folgende:

1	<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => false, ) ); ?>

Öffnen Sie jetzt Ihre Site und sehen Sie sich an, wie die alte Liste der Seiten entfernt wurde. Gehen Sie zu Aussehen --> Menüs und erstellen Sie ein neues Kopfzeilenmenü!

Das Beste daran ist, dass dies eine permanente Änderung ist und aufgrund eines Upgrades nicht entfernt wird!

Abschluss

Wie ich hoffe, dass ich wiederholt gesagt habe, ist dies eine Grundlage, auf der Sie aufbauen können. Ich hoffe, dass dieses Tutorial Ihnen ein tieferes Verständnis der BuddyPress-API vermittelt hat und Ihnen geholfen hat, sich mit den Elementen eines BuddyPress-Themes vertraut zu machen. In den nächsten Abschnitten werden wir unser aktuelles untergeordnetes Theme näher erläutern, um mithilfe von Vorlagen-Tags, Schleifen und Bedingungen ein Theme zu erstellen, das so aussieht und sich so anfühlt, wie wir es möchten. Auf diese Weise möchte ich Ihnen einen Ort bieten, an dem Sie mit BuddyPress bequem neue Themen erstellen können.

Vielen Dank fürs Lesen und ich hoffe, ich habe Ihnen geholfen, etwas Neues über das Theme mit BuddyPress und seiner API zu lernen!