Advertisement
  1. Code
  2. Plugins

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

Scroll to top
Read Time: 18 min

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:

    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:

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:

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:

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.

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.

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

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:

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:

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.

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.

Profildatenschleife

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

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:

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:

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:

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:

  1. Duplizieren Sie die zu bearbeitende Datei aus dem bp-Standarddesign.
  2. 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.
  3. 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.

  1. Kopieren Sie header.php in Ihren neuen Themenordner.
  2. Öffnen Sie die leere Datei functions.php, die Sie erstellt haben, und fügen Sie Folgendes hinzu:
  3. Öffnen Sie nun header.php und ersetzen Sie Zeile 79 durch folgende:
  4. Ö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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.