Share
Vorige maand bekeken we de basis van BuddyPress en hoe je het kunt gebruiken om sociale netwerken in je projecten te vergroten. Het antwoord was geweldig en veel gevraagd thematische tutorials. Dus, in deze driedelige serie, zullen we enkele kernelementen van de BuddyPress API uitleggen en uitpakken hoe een aangepast kindthema gemaakt moet worden dat zowel BuddyPress als WordPress updates.
Omdat steeds meer klanten op zoek zijn naar sociale netwerken, hebben we de basisbeginselen van BuddyPress besproken en de impact ervan op uw projecten. Nu willen we een duik nemen in het ontwikkelen van kindthema's die zijn aangepast aan uw behoeften en die updates voor zowel BuddyPress als WordPress zullen doorstaan. Onlangs zocht ik in de themarepository naar BuddyPress-compatibele thema's en kreeg ik maar liefst 19 geretourneerde resultaten! Onnodig te zeggen dat dit een markt is die zich kan ontwikkelen. Hoewel er plug-ins beschikbaar zijn die je thema's compatibel kunnen maken met BuddyPress, ben ik altijd een voorstander van inzicht in hoe je iets zelf kunt doen en niet helemaal afhankelijk zijn van plug-ins. Daarnaast is het maken van een eenvoudig kindthema een eenvoudig proces en het is de moeite waard om te leren als je van plan bent om met BuddyPress te ontwikkelen.
In deze tutorial zal ik je door enkele kernelementen van de BuddyPress API heen leiden en door de basisstappen om een aangepast BuddyPress-kindthema te maken. Aan het einde van deze zelfstudie moet u het volgende kunnen begrijpen:
Deze tutorial legt de basis voor de volgende twee delen, die meer diepgaande technieken zullen bevatten bij het werken met specifieke elementen binnen BuddyPress-achtige groepen en forums..
Als u met WordPress hebt gewerkt, weet u hoe belangrijk het is om te begrijpen hoe u kunt werken met zijn specifieke functies, acties, hooks en filters. Je hebt je ook gerealiseerd dat wanneer je deze dingen beter begrijpt, je projecten sneller gaan en je meer kunt duiken in het aanpassen van thema's en plug-ins. Er is niets anders met BuddyPress.
Ik wil u eerst door enkele belangrijke elementen van de BuddyPress API leiden: sjabloontags, loops en conditionals. Ik hoop dat we tijdens het verkennen van deze elementen en vervolgens een kindthema maken dat je kunt gebruiken wat hier is geschreven en het toepassen om je eigen BuddyPress-thema's voor kinderen te maken.
Om te beginnen, laten we BuddyPress-functies bekijken die centraal staan bij thema-ontwikkeling - sjabloontags. De BuddyPress codex heeft hier ook een lijst voor uw referentie. Deze sjabloontags zijn essentieel om je thema's echt aan te passen, en net zoals Dan Davies in zijn recente wp.tutsplus-artikel suggereerde, zou je een aantal hiervan moeten hebben als je van plan bent om veel thema's te ontwikkelen in BuddyPress. Sommigen van hen zijn precies hetzelfde als de sjabloontags in Wordpress, wat u ook enige tijd zou moeten besparen als u ervaring hebt met het ontwerpen van sjablonen in WordPress.
Hier volgt een korte lijst met enkele sjabloontags van koptekst tot voettekst om te gebruiken in uw thema-ontwikkeling:
Deze sjabloonlabels zijn dezelfde tags die worden gebruikt om inhoud in WordPress te formatteren en weer te geven. Ze werken ook in dezelfde WordPress-lus. Om een voorbeeld hiervan in actie te zien, opent u het bp-standaardthema en opent u index.php. Regels 15-61 geven een goed voorbeeld van de WordPress-lus aan het werk in BuddyPress.
Als u deze tags in actie wilt zien, opent u leden / member-loop.php en members / single.php binnen bp-standaard.
Om deze tags in actie te zien, open groepen / groepen-loop.php en groepen / single.php binnen bp-standaard.
U kunt deze sjabloontag ook gebruiken om zoekformuliersjablonen weer te geven. Zoek daarvoor in actie niet verder dan het index.php-bestand van bp-default.
Daarnaast bestaan er andere sjabloonlabels voor paginering voor verschillende inhoudstypen. Vervang gewoon het woord "groepen" in de bovenstaande sjabloontags met de woorden: forum, blogs, groepsleden of berichten, om de links op te nemen of tel voor welke lus u ook gebruikt. Deze lussen worden hieronder dieper besproken.
Zoals ik hierboven al vermeldde, kunt u de standaard WordPress-lus in uw thema's gebruiken om berichten weer te geven en meta-inhoud te plaatsen. BuddyPress bevat ook eigen loops die elk verantwoordelijk zijn voor het weergeven van BuddyPress-specifieke inhoudstypen. BuddyPress bevat loops voor: groepen, leden, activiteitenstream, forumonderwerpen, blogs, groepsleden, privéberichten en profielgegevens. Hoewel elk van deze lijkt erg op de standaard WordPress-lus, elk heeft zijn eigen specifieke variabelen die ook voor meer maatwerk mogelijk maken.
Zorg ervoor dat u in de bp-standaardthemap-bestanden duikt om meer inzicht te krijgen in loops en hun specifieke gebruik. Elk inhoudstype heeft een map waarin het specifieke lusbestand zich bevindt.
Laten we eens kijken naar een overzicht van elk ervan en een aantal specifieke manieren waarop u hun weergave kunt aanpassen.
De groepenlus wordt gebruikt om een lijst met sitegroepen weer te geven. De lus ziet er zo uit:
De volgende parameters zijn het handigst bij het aanpassen van de groepenlus:
Laten we een voorbeeld van een lus bekijken, aangepast met behulp van de bovenstaande parameters. Direct na de openingshaak vul je het volgende in:
Accentsconagua
$ args = array ('type' => 'populair', 'max' => 5, 'user_id' => $ user_id); if (bp_has_groups ($ args)) ? Omdat we meerdere argumenten gebruiken, heb ik een variabele met de naam ingesteld args die een array aankan. Vervolgens stel ik het type in op populair, de maximumwaarde per pagina op 5 en de user_id op de ID van de huidige aangemelde gebruiker. Dit zal dan de top 5 meest populaire groepen weergeven waartoe het huidige lid behoort en vervolgens de rest pagineren.
De leden-lus wordt gebruikt om een lijst met huidige leden weer te geven. De standaard leden-loop ziet er als volgt uit:
Om dieper te gaan, laten we deze code een beetje doorbreken. De eerste en laatste regels zijn van vitaal belang en vertel BuddyPress om alleen de rest van onze code weer te geven als er leden aanwezig zijn om te tonen.
?
Vervolgens hebben we onze lid paginering sjabloon tags. Er zijn ook sjabloontags voor paginering van andere inhoudstypes, zoals groepen en blogs. Deze zijn hierboven geschreven voor uw referentie.
Zoals u kunt zien, kan elke lus worden onderverdeeld in stukjes en meer worden onthuld over sjabloontags en hun gebruik. Alleen al in deze loop zien we de sjabloontags: bp_member_profile_data, bp_member_permalink, bp_member_avatar, en bp_member_latest_update.
De bp_has_members () argument heeft meerdere parameters die kunnen worden aangepast om de weergegeven ledenlijst te wijzigen. De meest bruikbare zijn:
Nuttige parameters voor de loop van de activiteitenstroom zijn:
Er zijn nog andere handige tips over het filteren van sitewide-activiteit en het toevoegen van ondersteuning voor opmerkingen op de looppagina van de activiteitenstroom in BuddyPress codex.
De loop van de forumonderwerpen wordt gebruikt om een lijst met fora-onderwerpen weer te geven, die als laatste een bericht over het onderwerp hebben geplaatst en hoeveel totale berichten er in het onderwerp zijn, onder andere. De lus ziet er zo uit:
| "title =" - "> | "> | "> "title =""> |
Nuttige parameters voor de lus van de forumonderwerpen zijn:
De blogs-loop wordt gebruikt om een lijst met gebruikersblogs weer te geven. De lus ziet er zo uit:
Nuttige parameters voor de blogs loop zijn:
Deze lus wordt gebruikt om leden van een specifieke groep weer te geven.
Deze groep heeft geen leden.
De lus voor privéberichten wordt gebruikt om privéberichten aan een gebruiker weer te geven. Het bevat ook een mooie lijst met sjabloontags om de weergave aan te passen.
Er zijn geen berichten om weer te geven.
De profielgegevenslus wordt gebruikt om de profielgegevens van de gebruiker weer te geven.
Deze gebruiker heeft geen profiel.
Hoewel BuddyPress veel loops bevat, zijn ze gemakkelijk te begrijpen en aan te passen. Door ze te bestuderen, moet u ook een beter begrip krijgen van hoe BuddyPress sjabloontags en conditionals gebruikt in het standaardthema. Laten we nu eens kijken hoe BuddyPress conditionele sjabloontags gebruikt.
Voorwaardelijke voorwaarden zijn een goede manier om eenvoudig en snel aangepaste thema's te ontwikkelen die veranderen op basis van bepaalde voorwaarden. In BuddyPress beginnen deze voorwaardes met: bp_is_ en ze worden gebruikt om specifieke inhoud op specifieke pagina's weer te geven. Als ik bijvoorbeeld iets specifieks op startpagina's van een groep zou willen weergeven, zou ik de volgende voorwaardelijke sjabloontag gebruiken:
Toon dit op homepagina's van groepen
Mijn voorwaardelijke sjabloontag is hier bp_is_group_home (). Om iets alleen op de startpagina van de gebruiker weer te geven, zou ik hetzelfde doen als hierboven, maar dan met de voorwaardelijke sjabloontag: bp_is_home of bp_is_my_profile.
Voor een uitgebreide lijst hiervan, klik hier.
Laten we nu de API-talk verlaten - u kunt opstaan en een minuutje uitrekken als dat nodig is - en naar een praktische toepassing gaan. Nogmaals, we proberen de basis te leggen voor ons aangepaste thema dat in deel 2 en 3 komt, dus laten we nu kijken naar het maken van een kindthema voor BuddyPress. Ik kan het belang hiervan niet genoeg benadrukken. Laat me wat persoonlijke ervaringen delen over hoe belangrijk dit punt eigenlijk is. Onlangs maakte ik een rookie-fout en bewerkte rechtstreeks de kernbestanden van BuddyPress zonder na te denken over upgrades en nieuwe releases. Ik wed dat je kunt raden wat er daarna gebeurde. Dat is juist. Ik vergat om het te ondersteunen en de nieuwe release overschreef al het werk dat ik erin had gestopt. Ik was behoorlijk van streek en moest onnodige uren spenderen aan het repareren van de puinhoop. Dus, om je te helpen dat te vermijden, hier is hoe je een BuddyPress kindthema maakt dat we zullen bewerken en bewerken in de volgende twee delen van deze tutorialserie.
Maak eerst een nieuwe map in uw wp-content / themes / map met de naam cool-bp-theme. Dit wordt ons BuddyPress-thema voor kinderen. Als je in de war bent over wat een 'kindthema' is, beschouw het dan als een thema dat nog steeds presteert en functioneert zoals het bp-standaardthema in wp-content / plugins / buddypress / bp-themes / bp-default / , maar zorgt voor bewerking en aanpassing en zal niet breken wanneer Wordpress of BuddyPress wordt bijgewerkt. Dit doet het door alleen de sjabloonbestanden in onze onderliggende themamap te wijzigen. Het gebruikt zelfs de bp-standaard stylesheet, maar laat toe dat nieuwe stylesheets worden geïmporteerd of dat originele CSS wordt overschreven in style.css.
Nadat ik de nieuwe map heb gemaakt, maak ik een nieuw leeg functions.php-bestand (omdat ik verwacht een aantal functies te bewerken) en een nieuw style.css-bestand met de volgende code:
/ * Theme Name: Cool New BuddyPress Theme Description: Cool nieuw thema voor BuddyPress. Versie: 1.0 Auteur: Adam Murray Auteur URI: http://twodoorscreative.com/ Sjabloon: bp-standaard Tags: buddypress, two-column, light * /
Het kernelement dat hier anders is, is het sjabloon regel, waar ik dit koppel aan het standaard bp-standaard waardoor het een kindthema wordt. Ik wil nu een stap verder gaan en de standaard bp-standaard stylesheets importeren. Om dit te doen, onder deze code voer ik in:
/ * De standaardthemastijlen * / @import url (? /? /Plugins/buddypress/bp-themes/bp-default/_inc/css/default.css) overnemen; / * De standaardstijl van de thema-beheerbalk * / @import url (? /? / Plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css) overnemen;
U hebt nu de basis van een BuddyPress-thema voor kinderen. Als je naar Appearance -> Thema's op je Wordpress-dashboard bladert, zie je nu het onderliggende thema en als je het activeert, zou je precies moeten zien wat je zou zien als je bp-default had geactiveerd.
Aangezien het onderliggende thema nu actief is en een sjabloon bewerkt, doen we eenvoudigweg het volgende:
Voor een snel voorbeeld van hoe dit te doen, laten we kijken naar het toevoegen van het aangepaste koptekstmenu dat ik in de BuddyPress-zelfstudie van vorige maand heb geleerd.
('Header Menu'))); add_action ('init', 'register_bp_default_menus'); ?>
'header-menu', 'container' => false,)); ?>
Het beste van alles is dat dit een permanente verandering is en niet zal worden verwijderd vanwege een upgrade!
Kortom, zoals ik hoop dat ik herhaaldelijk heb gezegd, is dit een basis waarop u kunt voortbouwen. Ik hoop dat deze tutorial je een dieper begrip van de BuddyPress API heeft gegeven en dat het je heeft geholpen om meer vertrouwd te raken met de elementen waaruit een BuddyPress-thema bestaat. In de volgende paragrafen gaan we in op ons huidige kindthema om een thema te maken dat eruit ziet en aanvoelt zoals we het willen door sjabloontags, loops en conditionals te gebruiken. Door dat samen te doen, hoop ik je een plek te bieden waar je gemakkelijk nieuwe thema's kunt creëren met BuddyPress.
Bedankt voor het lezen en ik hoop dat ik je heb geholpen iets nieuws te leren over thema's met BuddyPress en zijn API!
