Handleiding voor het stylen van de WP-PageNavi WordPress Plugin

Als u niet bekend bent met de WP-PageNavi WordPress-plug-in, hiermee kunt u de normale vorige / volgende navigatie vervangen door een geavanceerdere, genummerde paginanavigatie. Dit is een functie die ik heb opgenomen in een aantal thema’s die ik heb ontwikkeld, waaronder RS16, Blogwave, RS17, en Lichtpuntje.


RS16 PageNavi

In deze zelfstudie ga ik bespreken hoe:

  • Installeer WP-PageNavi en integreer het op de juiste manier in uw thema.
  • Twee methoden om standaard plugin-stijlen uit te schakelen en / of te negeren.
  • Een overzicht van de HTML-opmaakuitvoer door WP-PageNavi
  • Ten slotte, hoe u het uiterlijk van uw paginanavigatie kunt wijzigen via CSS

Installeer de plug-in

Je hebt twee opties als het gaat om het installeren van de WP-PageNavi plug-in.

  • Download het van WordPress.org, upload het naar uw / wp-content / plugins / directory en activeer (ook bekend als, op de ouderwetse manier).
  • Afhankelijk van uw host, kunt u ook automatisch plug-ins installeren door ze te zoeken op de pagina “Nieuw toevoegen” onder Plug-ins in uw WordPress-beheerderspaneel. Zoek gewoon naar “pagenavi” en je zou het moeten vinden.

Ok, dat had vrij eenvoudig moeten zijn. Nu is het tijd om je handen een beetje vies te maken in de code voor het integratiedeel.

Thema-integratie

Bij onze thema-integratie willen we nooit dat er fouten worden weergegeven als de WP-PageNavi niet actief is. In plaats daarvan zorgen we ervoor dat het terugvalt op de oude navigatie in de vorige / volgende stijl. Om dit te doen, gebruiken we een function_exists conditionele controle.

Laten we zeggen dat dit uw normale vorige / volgende WordPress-navigatiecode is:

<?php next_posts_link (‘«Oudere inzendingen’) ?>
<?php previous_posts_link (‘Nieuwere inzendingen »’) ?>

We veranderen het in het volgende:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } anders { ?>
<?php next_posts_link (‘«Oudere inzendingen’) ?>
<?php previous_posts_link (‘Nieuwere inzendingen »’) ?>
<?php} ?>

Dit controleert in feite of WP-PageNavi actief is en als dat het geval is, wordt de nieuwe paginanavigatiecode weergegeven. Zo niet, dan valt het gracieus terug naar de normale vorige / volgende navigatie.

Houd er rekening mee dat: Afhankelijk van hoe je CSS is gecodeerd, wil je misschien de wp_pagenavi () plaatsen; deel binnen de “navigatie” (of gelijkwaardige) div. Onthoud dat WP-PageNavi een nieuwe klasse uitspuugt genaamd “wp-pagenavi”, die we kunnen gebruiken om afzonderlijk te stylen.

Plugin-stijlen negeren

Standaard voegt WP-PageNavi automatisch een CSS-bestand met de naam pagenavi-css.css in vanuit de map met plug-ins in de koptekst van uw site. We willen niet dat deze standaardstijlen onze eigen coole, op maat gemaakte stijlen verstoren, dus we zullen ze volledig verwijderen, en er zijn twee eenvoudige manieren om precies dat te doen.

  • Voeg een CSS-bestand toe aan je themadirectory – Dit is waarschijnlijk de gemakkelijkste manier om de standaard WP-PageNavi-stijlen te overschrijven. Als je een bestand met de naam pagenavi-css.css in je themadirectory hebt, zal WP-PageNavi dit gebruiken in plaats van het standaardbestand in de plugin-directory.
  • Voeg een fragment toe aan uw functions.php-bestand – Het volgende codefragment dat ik heb opgehaald WP Recepten zal het bovenstaande gedrag volledig uitschakelen en geen stylesheet van de plug-in opnemen (de standaard of een overschrijving in uw themamap).

add_action (‘wp_print_styles’, ‘my_deregister_styles’, 100);

function my_deregister_styles () {
wp_deregister_style (‘wp-pagenavi’);
}

Plop die code gewoon in het functies.php-bestand van uw thema en voeg de CSS-stijlen toe aan het stijlblad van uw gewone thema (meestal style.css).

Notitie: Zorg ervoor dat de code wordt omringd door haakjes zoals <?php … ?> als uw functiebestand momenteel leeg is.

WP-PageNavi HTML Markup en CSS Selectors

Dit is hoe de WP-PageNavi-opmaak eruit ziet. In het volgende voorbeeld zijn er vier pagina’s, momenteel op pagina twee.

Vorige1
2
3
De volgende

Laatste “

We kunnen de volgende CSS-kiezers gebruiken om de bovenstaande HTML-opmaak te targeten:

  • .wp-pagenavi – Geldt voor de hele div, handig voor CSS-clears, opvulling / marge, lettergroottes en stijlen (vet, cursief, etc.)
  • .wp-pagenavi a – Richt zich op alle links binnen de paginanavigatie, inclusief paginanummers en vorige / volgende.
  • .wp-pagenavi a.page – Richt zich specifiek op paginanummers
  • .wp-pagenavi a.first – Richt zich specifiek op de “eerste” link (niet hierboven vermeld)
  • .wp-pagenavi a.last – Richt zich specifiek op de “laatste” link
  • .wp-pagenavi span – Richt zich op het huidige paginanummer samen met het uitbreidingsgedeelte (het ding met drie stippen)
  • .wp-pagenavi span.current – Richt zich specifiek op het huidige paginanummer
  • .wp-pagenavi span.extend – Richt zich specifiek op de uitbreiding (ding met drie stippen)
  • .wp-pagenavi span.pages – Specifiek gericht op paginanummerweergave (d.w.z. pagina 1 van 4)

Notitie: De vorige en volgende links hebben standaard geen CSS-klasse. Als u wilt dat ze volledig verschillen van de paginanummers en de eerste / laatste links, moeten deze alle stijlen die aan de .wp-pagenavi a selector zijn toegevoegd, opnieuw instellen. Als dat geen zin had, kijk dan eens naar het volgende (echt vereenvoudigde) voorbeeld.

Bijvoorbeeld: Stel dat u wilt dat de vorige en volgende links vetgedrukt zijn, maar dat elke andere link een normaal gewicht heeft. Je zou het volgende moeten doen:

.wp-pagenavi a {font-weight: bold; } / * Alleen vorige en volgende links * /
.wp-pagenavi a.pagina,
.wp-pagenavi a. eerste,
.wp-pagenavi a.last {font-weight: normal; } / * Andere links * /

Ik combineerde paginanummerlinks, de eerste link en de laatste link in één regel voor bijvoorbeeld doeleinden. Natuurlijk kunt u ze scheiden en aan elke stijl meer specifieke stijlen toevoegen.

Dit zou veel gemakkelijker zijn als er standaard een klasse aan vorige / volgende links zou zijn toegevoegd, maar dat is niet zo. Het is geen groot probleem, want je kunt ze toch gewoon resetten.

Belangrijke update: Dankzij een update van scribu in de comments blijkt dat de nieuwste versie van WP-PageNavi vorige / volgende lessen heeft (mede dankzij Yoast).

U kunt .wp-pagenavi a.previouspostslink en .wp-pagenavi a.nextpostslink gebruiken om respectievelijk vorige en volgende links te selecteren.

Dus vrijwel alles hierboven tot de ongeordende lijst met selectors niet meer relevant is, maar ik zal het gewoon houden omdat het een nuttige les kan zijn in het negeren van CSS in andere situaties. Het onderstaande CSS-voorbeeld is nog steeds van toepassing omdat ik die selectors toch niet heb gebruikt.

Een CSS-voorbeeld

Hier is een voorbeeld van een PageNavi-styling die ik heb gebouwd op de Blogwave thema.

Blogwave Bijgewerkte PageNavi

Hier is de code die ik heb gebruikt om deze look te krijgen, multi-single-line CSS is optioneel:

.wp-pagenavi a, .wp-pagenavi span {
opvulling: 5px; margin-right: 10px;
lettergrootte: 15px; kleur: # 03719c; tekstversiering: geen;
border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.wp-pagenavi a: hover, .wp-pagenavi span.current {
achtergrond: # 03719c;
kleur: #fff;
border: 3px solid #AFAFAF;
}
.wp-pagenavi span.current {font-weight: bold; }

En dit is wat het allemaal betekent:

Eerste regel
De .wp-pagenavi a, .wp-pagenavi-span selecteert alle anker- en span-elementen (vrijwel alles) binnen de .wp-pagenavi-div.

  • De eerste regel van de regel stelt een opvulling van 5px in, zodat deze niet wordt gepropt tegen de lichtgrijze rand (hieronder gedefinieerd). Het stelt ook een consistente marge van 10 px rechts van elk element in, zodat er een gelijke afstand tussen elk element is.
  • De tweede regel stelt een lettergrootte in van 15px, maakt de tekst blauw en zorgt ervoor dat links geen onderstreping hebben.
  • De derde regel zet overal een stevige grijze 3px-rand. De grensradiuscode maakt de hoeken afgerond.

Tweede regel
De .wp-pagenavi a: hover, .wp-pagenavi span.current selecteert respectievelijk het link hover-effect en het huidige paginanummer.

  • De eerste regel stelt een donkerblauwe achtergrondkleur in.
  • De tweede regel maakt de tekst wit.
  • De derde regel geeft een iets donkerdere rand.

Derde regel
Dit selecteert (opnieuw) het huidige paginanummer zonder ook het link hover-effect te beïnvloeden (zoals de tweede regel). Dit maakt het huidige paginanummer gewoon tot een vet lettertype.

De reden dat ik het niet heb opgenomen in het link-hover-effect is omdat het een ongelijkmatig effect heeft dat van normaal naar vet lettertype gaat.

Notitie: Afhankelijk van hoe uw CSS is gecodeerd, moet u mogelijk meer specifieke selectors gebruiken. Als er bijvoorbeeld stijlen zijn voor #content a en je WP-PageNavi in ​​de content div zit, moet je misschien je PageNavi CSS herschrijven als #content .wp-pagenavi a en andere minder specifieke stijlen overschrijven.

Conclusie

Ik weet dat dit een relatief eenvoudig voorbeeld was, je zou veel geavanceerdere CSS-regels kunnen hebben om de verschillende links en andere elementen nog meer te differentiëren. Hopelijk heb je onderweg ook een paar CSS-tips opgepikt.

Optionele WP-PageNavi-integratie is een vrij coole functie die thema-ontwikkelaars in hun thema’s kunnen integreren. Met de integratiemethode die ik hierboven heb geschetst, kunnen gebruikers gemakkelijk kiezen of ze deze willen gebruiken en het kan een leuke optie zijn voor veel blogs.

Ik hoop dat jullie de tutorial allemaal leuk vonden, en als je verzoeken hebt voor toekomstige WordPress-tutorials of CSS-tips, laat het me weten in de reacties.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map