Een responsieve jQuery-schuifbalk toevoegen aan uw WordPress-thema

Vandaag ga ik je meenemen door een responsieve jQuery-schuif in je WordPress-thema of -site te integreren. Het is geen baanbrekende tutorial, maar het is er een die zelden goed wordt gedaan, dus ik zou dat graag proberen op te lossen. In deze tutorial gaan we elke stap behandelen, van het maken van een aangepast berichttype om onze dia's te houden, tot het feitelijk gebruiken van de schuifregelaar op onze site.

We gaan de mooie FlexSlider 2 van WooThemes gebruiken, want het is een zeer goed gecodeerde, responsieve slider met een licentie onder de GPLv2-licentie. Als u geïnteresseerd bent, kunt u de code van FlexSlider in de GitHub-repository bekijken.

Voordat we iets doen, gaan we een stap terug doen en nadenken over:

Welke bestanden de schuifregelaar vereist
Welke bestanden wij vereisen

Het eerste dat we gaan doen, is FlexSlider downloaden.

Nadat je dat hebt gedaan, ga je gang en pak je het uit.

Er zijn een paar bestanden waar we in geïnteresseerd zijn, voornamelijk:

flexslider.css
images / bg_direction_nav.png
jquery.flexslider-min.js

Dit zijn alles wat we echt nodig hebben van de FlexSlider-download.

Stap 1 De bestanden instellen

Laten we die 3 bestanden van het bovenstaande verplaatsen naar de directory van ons thema. Afhankelijk van je thema of opstelling kun je de bestanden plaatsen waar je maar wilt, let je gewoon op waar die bestanden vandaan komen / waarnaar wordt verwezen en pas je de code aan op hun nieuwe locatie.

In het belang van deze tutorial gebruiken we het standaard Twenty Eleven-thema. In de inc / map, maak een nieuwe map genaamd schuif. Laten we daar een paar mappen maken:

css
afbeeldingen
js

Laten we flexslider.css in de css map, bg_direction_nav.png in de afbeeldingen map en jquery.flexslider-min.js in de, je raadt het al, js map.

Notitie: Normaal zou ik deze plaatsen css/afbeeldingen/js mappen in de directory van het thema met andere bestanden, maar om deze tutorial 'universeel' te maken, organiseren we onze bestanden op deze manier. Als u ervaring hebt met het ontwikkelen van WordPress-thema's, wilt u misschien uw bestanden handmatig indelen.

Nu gaan we nog 2 bestanden maken in de map slider:

slider.php - maakt de sjabloon van de schuifregelaar en laadt de bestanden van de schuifregelaar
slider_post_type.php - maakt het type schuifpijler aan

Je zou nu een moeten hebben schuif map die er ongeveer zo uitziet:

Voordat we verder gaan, open je functions.php bestand en voeg de volgende twee regels toe, die de twee .php-bestanden laden die we zojuist hebben gemaakt:

// Maak Schuifregelaar Berichttype vereist (get_template_directory (). '/Inc/slider/slider_post_type.php'); // Maak Slider require (get_template_directory (). '/Inc/slider/slider.php');

Nu ... laten we beginnen met coderen!

Stap 2 Schuifbalkposttype

Het eerste dat we gaan doen, is een aangepast berichttype maken dat al onze dia's bevat. Aangepaste berichttypes werden geïntroduceerd in WordPress 3.0 en zijn waarschijnlijk het leukste wat ooit in de wereld gebeurt (te ver? Ik hou gewoon van ze).

Doe open slider_post_type.php en voeg de volgende code toe om het aangepaste berichttype voor de dia te maken:

 _x ('Dia's', 'berichttype algemene naam'), 'singular_name' => _x ('Dia', 'berichttype enkelvoudige naam'), 'add_new' => __ ('Nieuwe dia toevoegen'), 'add_new_item' => __ ('Nieuwe dia toevoegen'), 'edit_item' => __ ('Bewerk dia'), 'nieuwe_item' => __ ('Nieuwe dia'), 'view_item' => __ ('Dia bekijken'), 'search_items' => __ ('Search Slides'), 'not_found' => __ ('Slide'), 'not_found_in_trash' => __ ('Slide'), 'parent_item_colon' => __ ('Dia'), ' menu_name '=> __ (' Dia's ')); $ taxonomies = array (); $ supports = array ('title', 'thumbnail'); $ post_type_args = array ('labels' => $ labels, 'singular_label' => __ ('Dia'), 'public' => true, 'show_ui' => true, 'publicly_queryable' => true, 'query_var' = > true, 'capability_type' => 'post', 'has_archive' => false, 'hierarchical' => false, 'rewrite' => array ('slug' => 'slides', 'with_front' => false), 'ondersteunt' => $ ondersteunt, 'menu_position' => 27, // Waar het is in het menu. Verander naar 6 en het is onder berichten. 11 en het is onder media, etc. 'menu_icon' => get_template_directory_uri (). ' /inc/slider/images/icon.png ',' taxonomieën '=> $ taxonomieën); register_post_type ( 'slides', $ post_type_args);  add_action ('init', 'register_slides_posttype');

Aangepast berichttype toegevoegd! Hieronder voegen we de metabox toe waar een veld staat voor de URL waarnaar de dia moet linken. We gaan nu de volgende grote muur van code kopiëren:

// Meta Box voor Slider URL $ slidelink_2_metabox = array ('id' => 'slidelink', 'title' => 'Slide Link', 'page' => array ('slides'), 'context' => 'normaal ',' priority '=>' default ',' fields '=> array (array (' name '=>' Slide URL ',' desc '=> ",' id '=>' wptuts_slideurl ',' class '= > 'wptuts_slideurl', 'type' => 'tekst', 'rich_editor' => 0, 'max' => 0),)); add_action ('admin_menu', 'wptuts_add_slidelink_2_meta_box'); function wptuts_add_slidelink_2_meta_box () global $ slidelink_2_metabox; foreach ($ slidelink_2_metabox ['page'] als $ pagina) add_meta_box ($ slidelink_2_metabox ['id'], $ slidelink_2_metabox ['title'], 'wptuts_show_slidelink_2_box', $ page, 'normal', 'default', $ slidelink_2_metabox); // functie om meta-vakjes functie te tonen wptuts_show_slidelink_2_box () global $ post; global $ slidelink_2_metabox; global $ wptuts_prefix; global $ wp_version; // Use nonce for verification echo ''; echo ''; foreach ($ slidelink_2_metabox ['fields'] als $ field) // verkrijg huidige post-metadata $ meta = get_post_meta ($ post-> ID, $ field ['id'], true); echo '','',''; switch ($ field ['type']) case 'text': echo '
', ", stripslashes ($ field [' desc ']); break; echo'';  echo '', stripslashes ($ field [' name ']),' ','
';  // Gegevens opslaan met metacand add_action ('save_post', 'wptuts_slidelink_2_save'); functie wptuts_slidelink_2_save ($ post_id) global $ post; global $ slidelink_2_metabox; // verifieer nonce als (! wp_verify_nonce ($ _ POST ['wptuts_slidelink_2_meta_box_nonce'], basename (__ FILE__))) return $ post_id;  // schakel automatisch opslaan in als (defined ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id;  // controleer machtigingen als ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) return $ post_id;  elseif (! current_user_can ('edit_post', $ post_id)) return $ post_id;  foreach ($ slidelink_2_metabox ['fields'] als $ field) $ old = get_post_meta ($ post_id, $ field ['id'], true); $ new = $ _POST [$ field ['id']]; if ($ new && $ new! = $ old) if ($ field ['type'] == 'date') $ new = wptuts_format_date ($ new); update_post_meta ($ post_id, $ field ['id'], $ new);  else if (is_string ($ new)) $ new = $ new;  update_post_meta ($ post_id, $ field ['id'], $ new);  elseif ("== $ nieuw && $ oud) delete_post_meta ($ post_id, $ field ['id'], $ old);

', stripslashes ($ field [' name ']),'	','

Oef. Dat is over. Ga naar je dashboard en je ziet een nieuw, glanzend 'Dia's' aangepast berichttype.

Stap 3 Laad schuifregelaarbestanden

Doe open slider.php. Nu gaan we jQuery, het FlexSlider jQuery-script en de FlexSlider-stylesheet in de wachtrij plaatsen. U kunt ook de code kopiëren van flexslider.css aan jouw style.css bestand indien gewenst.

Terwijl we dit doen, moet je iets doen. Vanwege onze bestandsstructuur, de flexslider.css heeft wat bewerking nodig zodat het weet waar de pijlafbeelding te vinden is. Open het en zoek en vervang het voor:

afbeeldingen met … /afbeeldingen

Stap 4 Schuif initialiseren

Nu moeten we wat jQuery toevoegen aan onze om de schuifregelaar te initialiseren. Laten we de volgende regels toevoegen aan slider.php onder de code die we zojuist hebben toegevoegd!

// Initialiseer de Slider-functie wptuts_slider_initialize () ?>

Een van de redenen waarom ik ervoor kies om FlexSlider te gebruiken, is vanwege de flexibiliteit. Er zijn nogal wat parameters waar je aan kunt sleutelen, maar ik heb net vier belangrijke hierboven opgenomen. Probeer het te veranderen glijbaan naar vervagen, of horizontaal naar verticaal. U kunt hier alle paremeters bekijken.

Notitie: Houd er rekening mee dat een andere manier om het bovenstaande te doen is met behulp van de wp_localize_script functie (zie in Codex) maar dit is een beetje geavanceerd voor deze tutorial. Echter, Pippin Williamson (een andere Wptuts + auteur) heeft zojuist een uitstekende tutorial over dit onderwerp geschreven als je geïnteresseerd bent.

Stap 5 Maak een schuifregelaar

Nu gaan we de sjabloon voor de schuifregelaar maken. Eerst doen we een WP_Query om 'posts' uit het aangepaste berichttype van de slides te halen. Vervolgens gaan we naar dia's en starten we de schuifregelaar. We beginnen dan aan de lus. Elke 'dia' controleert vervolgens of een dia-URL is ingesteld en, zo ja, maak er een koppeling voor. De afbeelding van de dia wordt dan weergegeven en de lus wordt gesloten.

// Create Slider-functie wptuts_slider_template () // Queryargumenten $ args = array ('post_type' => 'slides', 'posts_per_page' => 5); // De query $ the_query = new WP_Query ($ args); // Controleer of de query berichten retourneert als ($ the_query-> have_posts ()) // Start de schuifregelaar?>   have_posts ()): $ the_query-> the_post (); ?>   ">    
  
 
  Stap 6 De schuifregelaar gebruiken
 Nou, we hebben eindelijk de schuifregelaar gemaakt! Nu is het tijd om het daadwerkelijk te gebruiken. U kunt elk sjabloonbestand openen, zoals index.php, en echo de wptuts_slider_template functie om de schuifregelaar weer te geven.
 Dus als we de schuifregelaar in Twenty Eleven direct na de koptekst op de startpagina wilden laten zien, zouden we ons openen index.php en net eronder get_header (); ?>, voeg het volgende toe:
 
 Maar wat als u dit maakt voor een klant of iemand die gewoon geen sjabloondocumenten en PHP wil aanraken? We moeten waarschijnlijk een maken Korte code voor hen, zodat ze gewoon de schuifregelaar kunnen gebruiken met een [Slider] Korte code.
 Voeg dit toe onderaan slider.php:
 // Slider Shortcode-functie wptuts_slider_shortcode () ob_start (); wptuts_slider_template (); $ slider = ob_get_clean (); return $ slider;  add_shortcode ('slider', 'wptuts_slider_shortcode');
 De schuifregelaar kan nu worden gebruikt in berichten, pagina's of ergens anders waar een shortcode wordt geaccepteerd!
  Download
 Als je wilt, kun je het downloaden schuif map, die alles bevat wat we in deze zelfstudie hebben doorlopen. Je hoeft het alleen maar in je thema's te plaatsen inc map (of ergens anders is prima, maar zorg ervoor dat de onderstaande code aan te passen) en voeg het volgende toe aan uw functions.php:
 // Maak Schuifregelaar Berichttype vereist (get_template_directory (). '/Inc/slider/slider_post_type.php'); // Maak Slider require (get_template_directory (). '/Inc/slider/slider.php');
 Notitie: In het belang van deze zelfstudie, de naamruimte / het tekstdomein wptuts is gebruikt. U moet een zoekopdracht uitvoeren en alle code vervangen als u deze kopieert / plakt en vervangt:
   wptuts_ met uw naam_ 
  'Wptuts' met 'uw naam' 
 
 Als je deze tutorial leuk vond, laat het me weten en ik zal doorgaan met een tutorial over het aanpassen van onze slider! Vervolgens bekijken we het gebruik van miniaturen voor navigatie, het integreren van videodia's en het toevoegen van bijschriften.



		
			
	   
	




Code