Share
Schuifregelaars lijken tegenwoordig een ware rage, en met reden! U kunt foto's, inhoud, video's en meer toevoegen aan een in het oog springend, geanimeerd deel van uw website. Hoewel er een schat aan slider-plug-ins is (mijn huidige favoriet is die van Nivo Slider), is er niet één voor FlexSlider, een schuifregelaar met sneltoetsen en werkt met veegbewegingen op aanraakschermen. In deze zelfstudie maken we die plug-in!
Het eerste dat we moeten doen is de plug-in instellen. Maak de map / envato-flex-slider /, en daarin een bestand met de naam 'envato-flex-slider.php'. Hier zullen we alle benodigde informatie en code voor onze plug-in toevoegen, te beginnen met het plug-in definitieblok:
Ik stel ook graag enkele constanten in voor informatie die ik tijdens de plug-in veel gebruik. Onder het definitieblok, maar vóór de sluitende php-tag, voeg ik deze info toe:
Accentsconagua
define ('EFS_PATH', WP_PLUGIN_URL. '/'. plugin_basename (dirname (__ FILE__)). '/'); define ('EFS_NAME', "Envato FlexSlider"); define ("EFS_VERSION", "1.0"); Ik maak drie constanten: het pad van de plug-in, de naam van de plug-in en de versie van de plug-in, die wordt gebruikt voor upgrades, en om zo nodig de WordPress-invoegmap van wijzigingen te melden. Let op Ik start al mijn constanten met "EFS". Ik zal hetzelfde doen voor functienamen, zodat we geen conflict creëren met andere plug-ins of de WordPress-kern.
Nu we de configuratie hebben voltooid, voegen we de FlexSlider-bestanden en -code toe.
Het is tijd om het belangrijke onderdeel toe te voegen: de javascript & CSS voor FlexSlider. We doen dit met behulp van WordPress ' wp_enqueue_script en wp_enqueue_style om conflicten te voorkomen. Je kunt FlexSlider hier downloaden. We hebben 2 bestanden nodig: jquery.flexslider-min.js en flexslider.css en het / theme / folder.
wp_enqueue_script ('flexslider', EFS_PATH.'jquery.flexslider-min.js ', array (' jQuery ')); wp_enqueue_style ('flexslider_css', EFS_PATH.'flexslider.css '); In beide regels wijzen we een naam toe aan elk script en linken vervolgens naar de .js- en .css-bestanden. Merk op dat we onze constante gebruiken ESF_PATH. We moeten het hele pad gebruiken of de bestanden worden niet correct gekoppeld. Je zult ook opmerken dat we een 3e parameter hebben in wp_enqueue_script. Dit is een reeks andere scripts waarvan ons script afhankelijk is. In dit geval is het er maar één, en het is JQuery. Hier is een volledige lijst met scripts die is opgenomen in WordPress. U kunt elke handle in de array dependencies gebruiken.
Het volgende dat we willen doen, is het daadwerkelijke JavaScript dat ervoor zorgt dat de schuifregelaar werkt. We doen dit met onze eigen functie en een WordPress-actie.
functie efs_script () print ''; add_action ('wp_head', 'efs_script'); De belangrijke regel is hier add_action ('wp_head', 'efs_script');, welke onze functie zal vervullen, efs_script () wanneer wp_head wordt genoemd. Onze functie drukt gewoon het vereiste JavaScript af om FlexSlider zijn ding te laten doen!
U zult merken dat ik 'JQuery' gebruik in plaats van de traditionele '$' die gewoonlijk in JQuery-scripts wordt gebruikt. Dit is zo dat ons script niet conflicteert met andere JavaScript-bibliotheken, zoals Scriptaculous.
Kopieer tenslotte de / theme / folder naar uw / envato-flex-slider / folder.
Vervolgens gaan we onze shortcode en sjabloontag instellen. Met de shortcode kunnen gebruikers de schuifregelaar op elke gewenste pagina of post invoegen. We hebben hier een erg leuke introductietutorial over shortcodes. Met de sjabloontag kunnen thema-ontwikkelaars de schuifregelaar rechtstreeks in hun thema's invoegen. Als een thema-ontwikkelaar zelf, vind ik het ontzettend belangrijk om beide te integreren en ze gemakkelijk te vinden in documentatie. Je weet nooit wie je plug-in gaat gebruiken.
functie efs_get_slider () // We vullen dit later in. / ** voeg de shortcode toe voor de schuifregelaar- voor gebruik in editor ** / functie efs_insert_slider ($ atts, $ content = null) $ slider = efs_get_slider (); return $ slider; add_shortcode ('ef_slider', 'efs_insert_slider'); / ** sjabloon-tag toevoegen-voor gebruik in thema's ** / functie efs_slider () print efs_get_slider (); Op dit moment ziet deze code er vrij eenvoudig uit. Voor de shortcode noemen we onze algemene functie, efs_get_slider () en stuur de resultaten terug. Voor de sjabloontag, drukken we de resultaten af. We gebruiken ook WordPress ' add_shortcode () functie om onze shortcode te registreren. Ik heb met opzet de implementatie van weggelaten efs_get_slider () omdat we nog niet hebben ingesteld hoe we de afbeeldingen gaan maken. Om het voor gebruikers gemakkelijk te maken om een willekeurig aantal afbeeldingen aan hun schuifregelaar toe te voegen, gaan we een aangepast berichttype maken.
Het eerste wat we zullen doen is een nieuw bestand maken met de naam 'slider-img-type.php', waar al onze code voor het aangepaste berichttype zal gaan. Eerst zullen we een beetje instellen zoals we deden voor de plug-in.
Zoals je ziet, heb ik tot nu toe alleen maar constanten gemaakt (wat handig zou kunnen zijn voor meer geavanceerde aangepaste berichttypen) en thumbnail-ondersteuning voor ons nieuwe type toegevoegd. Het enige andere dat we in dit bestand zullen doen, is het nieuwe aangepaste berichttype registreren. Voor meer informatie over aangepaste berichttypen, kunt u mijn zelfstudie bekijken over het maken van een moordenaarsportfolio. Vlak voor de sluitende php-tag zullen we deze code toevoegen:
functie efs_register () $ args = array ('label' => __ (CPT_NAME), 'singular_label' => __ (CPT_SINGLE), 'public' => true, 'show_ui' => true, 'capability_type' => ' post ',' hierarchical '=> false,' rewrite '=> true,' supports '=> array (' title ',' editor ',' thumbnail ')); register_post_type (CPT_TYPE, $ args); add_action ('init', 'efs_register'); We hebben een functie gemaakt om een aangepast berichttype te registreren dat de titels, editor en miniatuurkaders gebruikt. Vervolgens voegen we een WordPress-actie toe om die functie te bellen zodra WordPress wordt geïnitialiseerd. Dat is het! Het laatste ding om te doen is ons nieuwe bestand toevoegen door toe te voegen require_once ( 'slider-img-type.php'); naar envato-flex-slider.php. Ik voegde het toe precies boven waar we onze scripts in de wachtrij zetten.
Nu we weten hoe we de schuifregelaar-afbeeldingen implementeren, laten we teruggaan en onze algemene functie voor de schuifregelaar invullen.
Ga terug naar waar we hebben gedefinieerd efs_get_slider () en vervang de opmerking // We vullen dit later in met het volgende:
$ slider = ''; return $ slider;'; $ efs_query = "post_type = slider-image"; query_posts ($ efs_query); if (have_posts ()): while (have_posts ()): the_post (); $ img = get_the_post_thumbnail ($ post-> ID, 'large'); $ Slider. ='
- '$ Img.'
'; endwhile; stop als; wp_reset_query (); $ slider. = '
De eerste twee regels zijn nodig vanwege de werking van FlexSlider. Het zoekt naar een ongeordende lijst genaamd 'dia's' binnen een div genaamd 'flexslider' en past de javascript / animaties daarop toe. Onze CSS is ook ingesteld om .flexslider en ul.slides te definiëren. Hierna creëren we een WordPress-lus die alle berichten van het type slider-image (ons aangepaste berichttype) grijpt en we krijgen het om de grote versie van de afgebeelde afbeelding te printen. Vervolgens retourneren we alle gegenereerde HTML als een variabele, die kan worden afgedrukt, net als bij onze sjabloontag of geretourneerd, net als bij onze shortcode.
Nu is het tijd om te testen! Zodra u een paar afbeeldingen aan uw nieuwe aangepaste berichttype hebt toegevoegd, maakt u een nieuwe pagina (ik heb net mijn schuifregelaar genoemd) en voegt u onze nieuw gemaakte shortcode toe, [Ef_slider]. Sla de pagina op en bekijk deze. Je zou zoiets als dit moeten zien:
Dat is het ongeveer voor nu. Er zijn zeker een paar dingen die we kunnen doen om de plug-in te verbeteren, zoals het toevoegen van opties voor de geavanceerde aanpassingen die FlexSlider te bieden heeft of het toevoegen van ondertitelingsondersteuning. Dat gezegd hebbende, geeft deze plugin je alles wat je nodig hebt om een redelijk eenvoudige, gemakkelijk te beheren, gemakkelijk invoegbare versie van FlexSlider voor WordPress te maken! Als u niet zeker bent over plaatsing of de bestanden die u wilt opnemen, kunt u de bronbestanden downloaden via de link bovenaan de zelfstudie. Genieten!
