Een van onze lezers vroeg of het mogelijk was om de rol van de gebruiker naast elke WordPress-opmerking te benadrukken? Het weergeven van het rollabel van de gebruiker geeft gewicht aan opmerkingen van geregistreerde gebruikers op uw Site web, met name auteurs, uitgevers en beheerders. In deze zelfstudie laten we u zien hoe u eenvoudig een label met gebruikersrol kunt toevoegen naast opmerkingen in WordPress.

voeg een label toe over de rol van user.png

Waarom het gebruikersrollabel weergeven naast een opmerking op WordPress?

Als u gebruikersregistratie op uw Site web of als u een Site web Multi-auteur WordPress, gebruikerslabels kunnen gebruikers aan elkaar voorstellen op basis van hun gebruikersrollen.

Gebruikers met de gebruikersrol "Editor" krijgen bijvoorbeeld een badge naast hun naam in opmerkingen, zodat andere gebruikers weten dat deze opmerking door een redacteur is gemaakt.

Het wekt gebruikersvertrouwen op en verhoogt de gebruikersbetrokkenheid bij opmerkingen op uw website.

Veel WordPress-thema's markeer alleen opmerkingen van de auteur van het bericht. Ze tonen geen labels voor andere gebruikersrollen, zelfs niet als andere opmerkingen zijn gemaakt door geregistreerde gebruikers of sitebeheerders.

Dat gezegd hebbende, laten we eens kijken hoe we eenvoudig de gebruikersroltag kunnen toevoegen naast opmerkingen in WordPress.

Een gebruikersrollabel toevoegen naast een opmerking

Voor deze zelfstudie moet u code aan uw bestanden toevoegen. WordPress theme. Als je dit nog niet eerder hebt gedaan, kijk dan eens hoe je je WordPress theme .

Het eerste dat u moet doen, is de volgende code toevoegen aan het functions.php-bestand van uw thema of aan een actieve plug-in op de site.

if (! class_exists ('BPC_Comment_Author_Role_Label')): class BPC_Comment_Author_Role_Label {publieke functie __construct () {add_filter ('get_comment_author', array ($ this, 'bpc_get_comment_author_role);), 10, add_filter ('get_comment_author_link', array ($ this, 'bpc_comment_author_role')); } // De rolfunctie van de auteur van een reactie ophalen bpc_get_comment_author_role ($ author, $ comment_id, $ comment) {$ authoremail = get_comment_author_email ($ comment); // Als de gebruiker is geregistreerd if (email_exists ($ authoremail)) {$ commet_user_role = get_user_by ('email', $ authoremail); $ comment_user_role = $ commet_user_role-> rollen [3]; // Inhoud om toe te voegen naast de naam $ this-> comment_user_role = ' '. ucfirst ($ comment_user_role). ' '; } anders {$ this-> comment_user_role = ''; } return $ author; } // Toon de auteur van de commentaarfunctie bpc_comment_author_role ($ author) {return $ author. = $ This-> comment_user_role; }} nieuwe BPC_Comment_Author_Role_Label; stop als;

Deze korte code hierboven maakt verbinding met de WordPress-filters die worden gebruikt om de naam van de auteur van de reactie weer te geven om het gebruikersrollabel op te nemen.

Nu kunt u elk bericht met opmerkingen bezoeken om het in actie te zien. Opmerkingen gemaakt door geregistreerde gebruikers zullen hun gebruikersrol weergeven naast de naam van de auteur van de opmerking. Alle opmerkingen van niet-geregistreerde gebruikers zullen alleen de naam van de auteur van de opmerking weergeven.

voorbeeldcommentaar met user role.png

Nu we de gebruikersrol hebben toegevoegd, is het tijd om deze te stylen en schoon te maken.

In onze code hebben we een CSS-klasse toegevoegd voor elke gebruikersrol, zodat we deze CSS-klassen kunnen gebruiken om elke gebruikersbadge anders aan te passen (d.w.z. verschillende kleuren gebruiken, enz.)

U kunt het volgende CSS-voorbeeld als uitgangspunt gebruiken:

.comment-author-label {opvulling: 5px; lettertypegrootte: 14px; grensradius: 3px; } .com-auteur-etiket-editor {background-color: #efefef; } .com-auteur-auteur-auteur {achtergrondkleur: #faeeee; } .com-auteur-label-medewerker {achtergrondkleur: #f0faee; } .comment-author-label-subscriber {background-color: #eef5fa; } .com-auteur-label-beheerder {achtergrondkleur: #fde9ff; }

Voel je vrij om de CSS naar wens aan te passen. Hier is hoe onze demosite eruit zag:

result demonstration site css.png

Dat is alles voor deze tutorial, ik hoop dat je hiermee een badge kunt toevoegen naast de teksten van je personeelsleden.