Hoe u een Slide Panel-menu kunt toevoegen in WordPress-thema's

Onlangs vroeg een van onze gebruikers ons hoe ze hun navigatiemenu konden vervangen door een jQuery-paneelmenu? Schuifpaneelmenu kan worden gebruikt om de gebruikerservaring op mobiele sites aanzienlijk te verbeteren. In dit artikel laten we u zien hoe u een dia-paneelmenu kunt toevoegen in WordPress-thema's.

Opmerking: dit is een tutorial op middelbaar niveau en vereist voldoende kennis van HTML en CSS.

Standaardmenu vervangen met een menu van het deelvenster Dia's in WordPress

Het doel is hier om een ​​dia-paneelmenu te laten zien aan gebruikers op kleinere schermen terwijl het standaardmenu van het thema behouden blijft zodat de gebruikers op laptops en desktops het volledige menu kunnen zien. Voordat we aan de slag gaan, is het belangrijk om te weten dat er veel verschillende WordPress-thema's zijn en dat je later met een beetje CSS te maken zult krijgen.

Het eerste wat u hoeft te doen is een teksteditor op uw computer openen, zoals Kladblok, en een nieuw bestand maken. Kopieer en plak deze code:

 (functie ($) $ ('# toggle'). toggle (functie () $ ('# popout'). animeren (left: 0, 'slow', function () $ ('# toggle' ) .html (''); ); , functie () $ ('# popout'). animeren (left: -250, 'slow', function () $ ('# toggle'). html (''); ); ); ) (JQuery); 

Vervangen example.com met uw eigen domeinnaam, en ook vervangen your-theme met uw eigen themamap. Sla dit bestand op als slidepanel.js op uw bureaublad. Deze code maakt gebruik van jQuery om een ​​menu van het schuifpaneel te schakelen. Het animeert ook het toggle-effect.

Open een FTP-client zoals Filezilla en maak verbinding met uw website. Ga vervolgens naar je themamap en als deze een js-map heeft, open je deze. Als uw themamap geen js-map heeft, moet u er een maken en het bestand slidepanel.js uploaden naar de js-map.

De volgende stap is het ontwerpen of vinden van een menupictogram. Het meest gebruikte menupictogram is het pictogram met drie regels. U kunt er een maken met Photoshop of een van de vele bestaande afbeeldingen van Google vinden. Voor deze tutorial gebruiken we een 27x23px menupictogram. Nadat je je menupictogram hebt gemaakt of gevonden, hernoem je het naar menu.png en upload je het naar de afbeeldingenmap in je themadirectory.

De volgende stap is om het javascript-bestand voor diavenster in WordPress in te checken. Kopieer en plak deze code in principe in uw thema's functions.php het dossier.

 wp_enqueue_script ('wpb_slidepanel', get_template_directory_uri (). '/js/slidepanel.js', array ('jquery'), '20131010', true); 

Nu alles is ingesteld, moet u het standaardmenu van uw thema wijzigen. Meestal geven de meeste thema's navigatiemenu's weer in thema's header.php het dossier. Open header.php bestand en vind de regel vergelijkbaar met deze:

  'primair', 'menu_class' => 'nav-menu')); ?> 

Het doel is hier om het navigatiemenu van uw thema in te pakken met de HTML-code om uw dia-paneelmenu op kleinere schermen weer te geven. We gaan het verpakken in a en . Zoals dit:

    'primair', 'menu_class' => 'nav-menu')); ?>  

Vervang example.com door uw eigen domeinnaam en uw thema met uw themamap. Sla uw wijzigingen op.

De laatste stap is om CSS te gebruiken om het menupictogram voor gebruikers met grotere schermen te verbergen en weer te geven aan gebruikers met kleinere schermen. We moeten ook de positie van het menupictogram en het uiterlijk van het schuifpaneel aanpassen. Kopieer en plak deze CSS naar de stylesheet van uw thema.

 @media-scherm en (min-breedte: 769px) #toggle display: none;  @media-scherm en (max. breedte: 768px) #popout positie: vast; hoogte: 100%; breedte: 250 px; achtergrond: rgb (25, 25, 25); achtergrond: rgba (25, 25, 25, .9); kleur wit; top: 0px; links: -250 px; overflow: auto;  #toggle float: right; positie: vast; top: 60px; rechts: 45px; breedte: 28 px; hoogte: 24 px;  .nav-menu li border-bottom: 1px solid #eee; padding: 20px; Breedte: 100%;  .nav-menu li: hover background: #CCC;  .nav-menu li a color: #FFF; text-decoration: none; Breedte: 100%;  

Houd er rekening mee dat het navigatiemenu van uw thema verschillende CSS-klassen kan gebruiken en dat deze in conflict kunnen komen met deze CSS-stijl. U kunt deze problemen echter oplossen door de Chrome Inspector-tool te gebruiken om erachter te komen welke CSS-klassen met uw stylesheet conflicteren. Speel met de CSS om aan je stijl en behoeften te voldoen.

We hopen dat deze zelfstudie u heeft geholpen een schuifpaneelmenu toe te voegen in WordPress met behulp van jQuery. Laat voor feedback en vragen hieronder een reactie achter en vergeet niet om ons te volgen op Google+