Eerder hebben we meer dan 30 hacks en tricks uitgelicht om WordPress aan te passen. Maar WordPress heeft verschillende iteraties en updates doorgemaakt sinds de publicatie van die compilatie. Sommige WordPress-functies zijn weggehaald, sommige zijn vervangen door betere benaderingen die sommige trucs bevatten waarvan u weet dat ze niet langer bruikbaar zijn.
We dachten dat je misschien nieuwe tips, trucs en hacks wilt die wel werken met de nieuwste versie van WordPress. Dit zijn er vijftig. Wees als vriendelijke herinnering voorzichtig bij het proberen van een van de tips in het gedeelte Geavanceerd, omdat u uw site mogelijk onbruikbaar maakt als u niet weet wat u doet.
1. Volledige hoogte-editor uitschakelen
WordPress 4.0 heeft een subtiele UX-wijziging toegevoegd in de editor. Als u scrolt of een lengtelinea schrijft, komt de hoogte van de editor overeen met de hoogte van uw scherm, waardoor de schuifbalken in de editor worden geëlimineerd.
Om een aantal panelen zoals de Fragment- en Aangepaste Velden te bereiken die zich onder de editor bevinden, moet je helemaal naar beneden scrollen door het einde van de alinea. Als u dit niet wilt, vinkt u de optie uit in het deelvenster Schermopties aan .
Compatibiliteit: WordPress 4.0
2. Insluiten vóór en na beeldvergelijking
Heb je ooit een beeldvergelijking meegemaakt waarbij je naar rechts kunt schuiven om het voor en links voor het volgende te zien? Als u zoiets op uw website wilt weergeven, kunt u TwentyTwenty installeren. Deze plugin is gebaseerd op Zurb TwentyTwenty. De plug-in introduceert een nieuwe shortcode, [twentytwenty], waar je twee afbeeldingen kunt toevoegen om te vergelijken.
Compatibiliteit: WordPress 3.5.1 of hoger
3. Herstel plug-ins of thema's naar vorige versie (gemakkelijk)
Zoals met elke andere systeemupdate, bestaat de kans dat een nieuwe plug-in of thema-update per ongeluk uw website verkloot. WordPress staat ons niet toe om terug te gaan naar de vorige versie, maar u kunt deze plug-in WP-Rollback installeren om die functionaliteit te krijgen. Zodra deze is geactiveerd, wordt een link "Rollback" toegevoegd aan elke geïnstalleerde plug-in.
Compatibiliteit: WordPress 3.8 of hoger
4. Organiseer het beheerdersmenu
Gebruik deze plug-in, Admin Menu Manager, om elke menuregel in admin te ordenen via een drag-and-drop interface.
Compatibiliteit: WordPress 4.0 of hoger
5. Teksteditor SyntaxHighlighter
De tekstmodus-editor van WordPress is vrij eenvoudig. U kunt het gebruiksvriendelijker maken door HTML Editor SyntaxHighlighter te installeren, een plug-in die syntaxkleuren toevoegt zoals in een codebewerker. Het maakt het bewerken een stuk eenvoudiger, vooral als u vaker een tekstmoduseditor gebruikt dan de visuele tegenhanger (WYSIWYG).
Compatibiliteit: WordPress 3.3 of hoger
6. Pictogram in menu toevoegen
Volg deze tip om een pictogram naast uw websitemenu-items toe te voegen waardoor uw menunavigatie meer in de kijker staat.
Compatibiliteit: WordPress 4.1 of hoger
7. Voice Search inschakelen
Zoeken met WordPress is slecht gebouwd, omslachtig en laat me niet beginnen met de nauwkeurigheid van het zoekresultaat. Maar laat dat je er niet van weerhouden om stemzoekmogelijkheden toe te voegen. Na installatie zult u een pictogram "microfoon" zien verschijnen in het zoekvak.
Compatibiliteit: WordPress 2.6 of hoger
8. Installeer WordPress Plug-in via Github
Heeft u een WordPress-plug-in in Github gevonden die u op uw website wilt installeren? Volg deze tip over het eenvoudig installeren van plug-ins met slechts een paar klikken. Wees echter voorzichtig met wat u installeert omdat plug-ins niet gematigd zijn. Er is een kans dat kwaadaardige codes infiltratie van uw website mogelijk maken.
Compatibiliteit: WordPress 3.6 of hoger
9. Installeer plug-in met één klik
Voor meer pluginbeheer zou u WP-Core kunnen installeren. Dit is een plug-in waarmee WordPress-plug-ins worden gestroomlijnd. Je kunt ook een collectie maken om verschillende plug-ins samen te voegen en ze met één klik te installeren.
Compatibiliteit: WordPress 3.5 of hoger
10. Geavanceerde afbeeldingsstijlen
Vroeger konden we marges en randen instellen wanneer we afbeeldingen in de inhoud invoegen. Vanaf WordPress 3.9 zijn deze opties verwijderd. Als je ze hebt gemist, kun je deze plug-in installeren om deze opties terug te brengen.
Compatibiliteit: WordPress 3.9 of hoger
11. Schijfgebruiksschema weergeven
Installeer deze plug-in Schijfgebruik Sunburst om een mooie visualisatie weer te geven, vergelijkbaar met DaisyDisk, van het gebruik van uw schijfruimte op de website. Een redelijk handig hulpprogramma om toe te voegen aan uw website.
Compatibiliteit: WordPress 4.0 of hoger
gevorderd
Voorbij dit punt zijn geavanceerde tips en tricks voor diegenen die willen verkennen, en degenen die ervan houden om hun handen vies te maken met codes. Veel van de volgende tips kunnen echter uw website onbruikbaar maken, vandaar dat ze met meer aandacht en met extra voorzichtigheid moeten worden uitgevoerd.
12. WordPress Output Debug File
Dit fragment vertelt WordPress dat het de foutopsporingslogboekfout in een .log bestand moet opslaan in plaats van het in de front-end weer te geven. Een handig fragment om WordPress-foutopsporing in een live site mogelijk te maken.
Voer alle Jetpack-modules uit en schakel ze offline in, inclusief de modules waarvoor u daadwerkelijk verbinding met WordPress.com moet maken; een handige tip als u Jetpack-modules ontwikkelt en integreert met uw thema.
Compatibiliteit: WordPress 4.1
14. Log in op WordPress met e-mailadres
WordPress onthult de gebruikersnaam van een gebruiker, waardoor het een stap gemakkelijker wordt voor aanvallen met brute kracht. U kunt overwegen inlogparameters te wijzigen met een combinatie van e-mail en wachtwoord in plaats van met een gebruikersnaam die deze hack gebruikt.
Compatibiliteit: WordPress 2.5.0
15. Schakel self-ping / zelf-trackback uit
Deze truc voorkomt dat WordPress zelf ping, wat gebeurt als u pagina's of berichten van uw eigen website koppelt.
functie no_self_ping (& $ links) {$ home = get_option ('home'); foreach ($ links als $ l => $ link) als (0 === strpos ($ link, $ home)) niet is ingesteld ($ links [$ l]); } add_action ('pre_ping', 'no_self_ping');
Een andere manier om dit te gebruiken is door Disabler-plug-in te installeren. Het is een plug-in waarmee u bepaalde WordPress-functies in- of uitschakelt, waaronder het uitschakelen van self-ping.
Compatibiliteit: WordPress 2.0
16. Inhoud vooraf invullen
Deze tip is best handig als u standaard inhoud wilt toevoegen elke keer dat u een nieuw bericht, een nieuwe pagina of een aangepast berichttype maakt; het idee lijkt op het toevoegen van een standaardhandtekening bij het maken van nieuwe e-mails.
Compatibiliteit: WordPress 1.5
17. Aangepaste klasse voor bericht
De volgende tip onderzoekt een aantal aanpassingen van WordPress Post Class grondig met post_class . Het is handig als u specifieker wilt zijn met betrekking tot uw berichtstijlen.
Compatibiliteit: WordPress 2.7
18. Google-lettertypen toevoegen (de juiste manier)
Nog een geweldige tip van ThemeShaper, een complete gids om Google Font correct toe te voegen aan uw WordPress-thema. Het bevat onder meer hoe u het in de front-end kunt toevoegen, in de editor, en hoe u compatibiliteit voor verschillende talen kunt garanderen.
Compatibiliteit: WordPress 3.0
19. Alternatieve sjabloon laden
WordPress gebruikt single.php om single.php te geven. Als u dit wilt wijzigen in, misschien post.php, laat deze tip zien hoe u standaard WordPress-sjablonen op de juiste manier vervangt.
WordPress 3.4 voegt een nieuwe API toe genaamd Customizer waarmee u besturingselementen kunt maken om het thema aan te passen en het resultaat in realtime te bekijken. De Customizer API kan echter voor sommigen overwhleming zijn, omdat het multidisciplinaire codesets betreft, waaronder PHP, JavaScript, Ajax en jQuery.
Desondanks heeft Theme Foundation een complete handleiding voor WordPress Customizer samengesteld. Je leert hoe je het menu Aanpassen kunt toevoegen, secties, instellingen, invoerbesturingselementen en panelen kunt maken en hun functies allemaal tegelijk leert - in en uit. Een essentiële referentie voor WordPress-thema-ontwikkelaars.
Compatibiliteit: WordPress 3.4
21. Vagrant gebruiken met WordPress
Vagrant is een geweldig hulpmiddel om een virtuele omgeving te creëren en om een test van uw WordPress-ontwikkeling uit te voeren om ervoor te zorgen dat thema's en plug-ins in verschillende gevallen zouden werken. In deze volgende tip zal Daniel Pataki u helpen met het opzetten van uw WordPress-site met Vagrant.
Compatibiliteit: elke WordPress-versie
22. Ophalen van WordPress Gravatar-URL
De WordPress get_avatar() is een handige functie om de avatar van een gebruiker te krijgen; de functie haalt het beeld samen met het img element op. Maar soms wil ik alleen de URL van de afbeelding pakken, zodat ik vrij en gemakkelijk aangepaste klassen of ID's aan de afbeelding kan toevoegen.
Als u dit in gedachten heeft, voeg dan de volgende code toe aan uw functions.php :
Dan ergens in een ander bestand - misschien single.php of page.php - gebruik de volgende code om de afbeelding te tonen.
$ avatar_url = get_avatar_img_url (); echo ' ';
Hier is een meer gedetailleerd bericht om het voor je op te splitsen.
Compatibiliteit: WordPress 1.5
23. Klassen uit het menu verwijderen
WordPress voegt standaard een aantal klassen toe. Hoewel dit goed is om uitgebreide aanpassingen mogelijk te maken, ziet de HTML-opmaak van het menu er echt rommelig uit. Ruim het op en voeg alleen de klasse toe die je nodig hebt met het onderstaande fragment.
SSL beveiligt niet alleen uw website, maar hobbelt ook omhoog in de zoekresultaten van Google. In de volgende tip behandelt Jenni McKinnon hoe SSL kan worden geïmplementeerd in WordPress-multisites die meerdere subdomeinen kunnen gebruiken.
Compatibiliteit: WordPress 3.0.0
25. WordPress Content Editor aanpassen
Het toevoegen van stijlen aan de editor verbetert de schrijfervaring in de WordPress-editor. Je kunt de typografische stijlen van de backend matchen met de front-end, zodat je de uiteindelijke versie (of een versie die zo dicht mogelijk bij de finale komt) tijdens het schrijven kunt zien. Dit zal het wisselen van heen en weer tussen de editor en de inhouduitvoer verminderen.
function my_editor_styles () {add_editor_style ('editor-style.css'); } add_action ('admin_init', 'my_editor_styles');
Compatibiliteit: WordPress 3.0.0
26. Maken van invoerscherm Welkomstscherm
Als u zojuist WordPress hebt bijgewerkt, wordt u doorgestuurd naar een speciaal scherm met de details van de nieuwste versie die u zojuist hebt geïnstalleerd, de bijdragers, de toevoegingen en alle wijzigingen die u onder de motorkap hebt aangebracht. Deze tip, Het creëren van een welkomstscherm voor uw WordPress plug-in door Daniel Pataki zal u helpen bij het bouwen van een welkomstscherm voor uw eigen plug-in.
Compatibiliteit: WordPress 3.6
27. Pas het mobiele thema van Jetpack aan
Jetpack wordt geleverd met een mobiel thema. Het is een speciaal thema dat wordt gebruikt wanneer de website wordt bekeken op mobiele apparaten. En net als elk ander thema kunnen we het aanpassen. Hier is een uitleg van Jeremy, een van de ontwikkelaars van Jetpack, over het aanpassen van het Jetpack Mobile Theme. Het is een goed alternatief om te overwegen in plaats van responsief webontwerp.
Compatibiliteit: WordPress 3.8
28. Hoofdafbeelding aan categorie toevoegen
Wilt u een uitgelichte afbeelding voor een categorie toevoegen en weergeven in uw thema? Deze functie ontbreekt in WordPress, wat eigenlijk handig zou kunnen zijn voor thema-ontwikkelaars.
WordPress geeft standaard update-meldingen weer voor alle gebruikersniveaus wanneer ze zijn aangemeld bij de backend. Voeg de volgende codes toe om de update-melding voor WordPress te verbergen, behalve voor gebruikers met beheerdersrechten.
globale $ user_login; get_currentuserinfo (); if (! current_user_can ('update_plugins')) {// controleert of de huidige gebruiker plug-ins add_action kan bijwerken ('init', create_function ('$ a', "remove_action ('init', 'wp_version_check');"), 2); add_filter ('pre_option_update_core', create_function ('$ a', "return null;")); }
Compatibiliteit: WordPress 3.0.1
31. Miniatuur toevoegen in bericht / pagina bewerkingslijst
Deze code geeft de aanbevolen afbeeldingen weer die u hebt toegewezen om in de kolom Post te posten. Een handige truc om te zien welk bericht een miniatuur heeft en welke niet. Houd er rekening mee dat uw thema postminiaturen moet ondersteunen.
Eerlijk gezegd wist ik niet dat we afbeeldingen in WordPress konden verscherpen omdat we de afbeelding uploaden. Hier is hoe je kunt, maar onthoud dat het alleen werkt voor JPG-afbeeldingen.
Verwijder een van remove_action uit het bovenstaande fragment dat u wilt behouden.
Compatibiliteit: WordPress 2.0
34. Smart WP_Debug
In het ideale geval zou u de WP_Debug niet in een live-site moeten activeren omdat deze kritieke informatie blootlegt. Maar als je een truc nodig hebt om dit veilig te doen, dan is het hier:
if (isset ($ _ GET ['debug']) && $ _GET ['debug'] == '1') {// maak het melden van berichten tijdens de ontwikkeling mogelijk - E_ALL define ('WP_DEBUG', true); } elseif (isset ($ _ GET ['debug']) && $ _GET ['debug'] == '2') {// moet waar zijn voor WP_DEBUG_DISPLAY om te werken definiëren ('WP_DEBUG', true); // dwingen de weergave van fouten definiëren ('WP_DEBUG_DISPLAY', true); } elseif (isset ($ _ GET ['debug']) && $ _GET ['debug'] == '3') {// moet waar zijn voor WP_DEBUG_LOG om te werken definiëren ('WP_DEBUG', true); // log-fouten in debug.log in de wp-content directory define ('WP_DEBUG_LOG', true); }
Met de bovenstaande code toegevoegd, kunt u debugging inschakelen door ?debug=2?debug=1?debug=3 aan het einde van de URL toe te voegen om de fout te zien die zich in uw website voordoet.
Compatibiliteit: WordPress 2.0
35. Shortcode in widget inschakelen
Het volgende is een handig stuk code als u YouTube of SoundCloud in het widgetgebied wilt insluiten met een shortcode.
Stel het standaard type editor in dat uw gebruikers kunnen gebruiken. Verander de $editor naar html of tinymce . Natuurlijk zou de gebruiker zich nog steeds kunnen afmelden voor de standaardinstelling.
function my_default_editor () {$ editor = 'tinymce'; // html of tinymce return $ editor; } add_filter ('wp_default_editor', 'my_default_editor');
Compatibiliteit: WordPress 2.5.0
37. Verleng automatische uitloging
WordPress zorgt ervoor dat iemand ingelogd blijft gedurende 48 uur, plus een verlenging van 14 dagen als we de "Remember Me" optie aanvinken bij het inloggen. Als u er echter zeker van bent dat uw computer niet wordt geschonden door een tweede of derde partij, kunt u deze code toevoegen om uzelf maximaal een jaar lang in te loggen. U wordt slechts eenmaal per jaar om een login gevraagd.
functie keep_me_logged_in_for_1_year ($ expirein) {terug 31556926; // 1 jaar in seconden} add_filter ('auth_cookie_expiration', 'keep_me_logged_in_for_1_year');
Compatibiliteit: WordPress 2.8.0
38. Gebruik altijd figuur
WordPress pakt img met een p tag. Als u een semantische purist voor HTML bent, kunt u deze code toevoegen om WordPress te dwingen om de afbeelding om te slaan met het figuurelement.
"Beheerder", "Auteur" en "Abonnee" zijn de namen die voor WordPress-gebruikers op administratief niveau worden gegeven. Als u deze standaardnamen wilt wijzigen in iets dat beter geschikt is voor uw website, voegt u de volgende code toe en voert u de wijziging in de namen in naar uw voorkeur:
Sommigen van ons geven er de voorkeur aan dat berichten worden vrijgegeven met een Featured Image. Dit bericht, Featured Image On Post valideren, door Paul Underwood laat je zien hoe je je gebruikers een uitgelichte afbeelding laat uploaden voordat hun bericht gepubliceerd kan worden.
Compatibiliteit: WordPress 3.0
42. Aangepaste beeldgrootte in Media Uploader
add_image_size is de WordPress-functie waarmee we een aangepast beeldformaat kunnen bijsnijden en weergeven. Als u gebruikers toestemming wilt geven om afbeeldingen toe te voegen binnen dit aangepaste formaat, voegt u de volgende codes toe om de optie "Aangepaste afbeeldingsgrootte" in de WordPress media-uploader weer te geven.
43. Laad het script alleen als er een bepaalde shortcode aanwezig is
In een vorige post hebben we u laten zien hoe u een aangepaste shortcode kunt maken. Als uw shortcode een JavaScript-functie vereist, volg dan de Jedi Master-weg van Silviu-Cristian Burcă (bekend als Scribu) om ervoor te zorgen dat u alleen het JavaScript laadt wanneer de shortcode wordt toegepast.
Compatibiliteit: WordPress 2.6
44. Menu Beschrijving
Wanneer u via Menu Vormgeving> een menu toevoegt, ziet u een invoer om "Beschrijving" toe te voegen. Maar je zult het nergens in de front-end vinden omdat we de standaard menusjabloon van WordPress moeten aanpassen om de beschrijving toe te voegen.
Hier is een elegante manier om dat te doen.
', esc_html($item->description)); functie add_description_to_menu ($ item_output, $ item, $ depth, $ args) {if (strlen ($ item-> description)> 0) {// voeg beschrijving toe na link $ item_output. = sprintf (' % s ', esc_html ($ item-> beschrijving)); // plaats de beschrijving als laatste item * in * link ($ input_output eindigt met "{$ args-> after}") // $ item_output = substr ($ item_output, 0, -strlen ("{$ args-> after}" )). ', esc_html($item->description)) . sprintf (' % s ', esc_html ($ item-> beschrijving)). "{$ args-> after}"; } return $ item_output; } add_filter ('walker_nav_menu_start_el', 'add_description_to_menu', 10, 4);
Compatibiliteit: WordPress 3.0.0
45. Dashicons gebruiken
U kunt WordPress's eigen lettertype icon Dashicons nu gebruiken om pictogrammen toe te voegen aan het wp-admin-menu. Bekijk onze tutorial over hoe Dashicons te gebruiken.
Compatibiliteit: WordPress 3.8
46. Pas het bericht 'Howdy' aan
Volg onze vorige zelfstudie om het onzinnige 'howdy'-bericht van WordPress op de beheerbalk te wijzigen in iets persoonlijks.
Compatibiliteit: WordPress 2.9
47. Post van de populaire populaire widget van Jetpack uitsluiten
Jetpack wordt geleverd met een widget waarmee je de meest bekeken of populaire berichten en pagina's kunt weergeven. Maar soms kunnen uw meest populaire pagina's de startpagina zijn of een pagina die u niet wilt opnemen in de meest bekeken stapel.
Voeg de volgende code toe om die pagina of post te verwijderen:
Vervang de ID die wordt weergegeven in het fragment met de ID van het bericht of de pagina die u wilt verwijderen.
Compatibiliteit: WordPress 4.0 en Jetpack 3.3
48. Titel titel afbreken
Het volgende fragment bepaalt de maximale lengte van de titel. Voeg het volgende fragment toe in functions.php . Gebruik vervolgens de functie customTitle() in de sjabloon om de titel uit te voeren in plaats van de WordPress the_title() -methode.
function customTitle ($ limit) {$ title = get_the_title ($ post-> ID); if (strlen ($ title)> $ limit) {$ title = substr ($ title, 0, $ limit). '...'; } echo $ titel; }
Als u een WordPress-thema met een opgemaakte lay-out maakt, waarbij de tegelhoogte gelijk moet zijn, kunt u de limiet van de titellengte opgeven. Dit fragment zou in dat geval van pas kunnen komen.
Compatibiliteit: WordPress 3.0
49. WordPress-logo verwijderen
WordPress 3.1 voegt een beheerbalk toe, die een handvol links en het WordPress-logo bevat. Als u websites gaat uitdelen aan een klant en u wilt dat deze merkloos is, dan is hier de functie om dat WordPress-logo te verwijderen.
Verbeter de toegankelijkheid van uw website voor mobiele apparaten met QR-codes. Met deze code kunt u QR-codes weergeven met een koppeling naar het artikel. Mobiele gebruikers met een QR-codescanner kunnen de artikelkoppeling verkrijgen voor snelle weergave op hun mobiele apparaten.
"alt =" QR-code voor
Compatibiliteit: WordPress 2.3.0
Lees nu: 10 WordPress-plug-ins voor een betere backend-administratie
Schermen met een hoge resolutie op mobiele apparaten zijn nu een norm. De afbeeldingen geven gebruikers een scherper en frisser uiterlijk, en eens ze gewend zijn geraakt aan deze hoge kwaliteit, worden webontwikkelaars ertoe aangezet om beelden van hoge kwaliteit te produceren voor hun gebruikers. De meeste afbeeldingen die we een decennium geleden gebruiken, zullen ongetwijfeld wazig worden op een netvlies-weergavescherm
CSS heeft geen pseudoclass voor het richten van klikgebeurtenissen, en dit vormt een van de grootste pijnpunten van front-end ontwikkelaars. De dichtstbijzijnde pseudo-klasse is :active die een element opmaakt voor de periode dat een gebruiker er met de muis op drukt.Dit effect is echter van korte duur: zodra de gebruiker de muis loslaat, werkt :active niet meer