Share
Sliders kunnen controversieel zijn - we hebben allemaal klanten gehad die erop staan, ongeacht of ze de site verbeteren. Maar ze hebben hun plaats. Ze kunnen helpen belangrijke inhoud te markeren, afbeeldingen weergeven op een site waar visuele elementen belangrijk zijn en een site tot leven brengen.
In de meeste gevallen hebt u waarschijnlijk schuifregelaars gebruikt om afbeeldingen weer te geven die al dan niet zijn gekoppeld aan inhoud op uw site. Maar u kunt ook een schuifregelaar gebruiken om tekst op uw site weer te geven.
In deze set van twee zelfstudies laat ik je zien hoe je een tekstschuif kunt maken met een interessant effect: het gebruikt een aangepast berichttype om het ene stuk tekst na het andere in twee blokken in te voegen, waardoor het effect van een gesprek bij de bovenkant van de pagina. Dit wordt over een foto van twee personen heen gelegd, zodat het effect is dat de twee met elkaar praten.
Om mee te gaan, heb je nodig:
Het voorbeeld dat ik ga gebruiken is een real-world site die ik aan het ontwikkelen ben voor een klant, die een kindthema van het Responsieve thema uitvoert. Ik maak een kind van het Responsive-thema en voeg daar een aangepaste stijl aan toe, evenals functies in de thema's functions.php het dossier. Je zou dit aan je eigen thema kunnen toevoegen of een kindthema van Responsive zoals ik kunnen maken.
In deze zelfstudie krijgen we de schuifregelaar in gebruik met een aangepast berichttype. Concreet zullen we:
In het volgende deel zullen we CSS aan ons thema toevoegen om de tekst correct te plaatsen, het conversatie-effect te creëren en het te stylen.
Dus laten we beginnen!
Laten we eerst het kindthema van het Responsieve thema maken. Ik doe dit omdat ik het Responsive-thema zelf niet wil bewerken: als u dat doet, raakt u uw werk kwijt wanneer u het thema het volgende hebt bijgewerkt. U kunt ook een plug-in maken om dit te doen.
In uw wp-content / themes map, maak een nieuwe lege map aan. Ik bel de mijne tutsplus-gesprek-banner.
Maak in die map een bestand met de naam style.css en voeg dit toe:
Accentsconagua
/ * Theme Name: Tutsplus Conversation banner Thema Theme URI: http: //.tutsplus.com/tutorials/create-a-conversation-banner-with-revolving-text-using-a-custom-post-type--cms- 25938 Beschrijving: Thema voor tuts + zelfstudie over het maken van een gespreksbannereffect. Kindthema voor het responsieve thema. Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.co.uk/ Sjabloon: responsieve versie: 1.0 * / @import url ("... /responsive/style.css");Bewerk de bovenstaande code om uzelf de auteur te maken en uw eigen URI toe te voegen.
Bewaar nu dat bestand en activeer je nieuwe thema.
Omdat dit een echte website is, heb ik er een aangepaste stijl aan toegevoegd, die in de stylesheet van het kindthema staat. Ik zal dit niet in detail bespreken omdat het buiten de scope van de tutorial valt, maar je kunt de styling in de codebundel zien met deze tutorial.
Hier ziet u hoe mijn site eruitziet voordat de schuifregelaar wordt toegevoegd:
De afbeelding in de kop heeft ruimte aan beide zijden van de twee personen en ik zal mijn schuifbalk opmaken zodat deze tekst aan beide zijden van de mensen weergeeft, waardoor het effect wordt weergegeven dat ze naar hun woorden wijzen.
De neststap is om een genoemd type te registreren citaat. Maak in de onderliggende themamap een nieuw bestand met de naam functions.php.
Opmerking: het is een goede gewoonte om een plug-in te gebruiken om een berichttype te registreren in plaats van ze aan uw themafunctiesbestand toe te voegen. Ik gebruik het functiesbestand hier om alles op één plaats te houden, dus je hebt een codebundel om te downloaden.
Open uw functiesbestand en voeg deze code eraan toe:
function tutsplus_create_post_type () $ labels = array ('name' => __ ('Quotes'), 'singular_name' => __ ('Quote'), 'add_new' => __ ('Nieuwe quote'), 'add_new_item' => __ ('Nieuwe offerte toevoegen'), 'edit_item' => __ ('Bewerk offerte'), 'nieuwe_item' => __ ('Nieuwe offerte'), 'view_item' => __ ('Bekijk offerte'), 'search_items' => __ ('Zoekcitaten'), 'not_found' => __ ('Geen offertes gevonden'), 'not_found_in_trash' => __ ('Geen citaten gevonden in de prullenbak'),); $ args = array ('labels' => $ labels, 'has_archive' => false, 'public' => true, 'hierarchical' => false, 'supports' => array ('title', 'editor', ' excerpt ',' custom-fields ',' thumbnail ',' page-attributes ',' author '),); register_post_type ('quote', $ args); add_action ('init', 'tutsplus_create_post_type');Hiermee wordt een nieuw berichttype geregistreerd citaat.
U kunt het nieuwe berichttype op mijn site zien, met enkele aanhalingstekens die ik heb toegevoegd:
Houd er rekening mee dat dit slechts schijncitaten zijn - het feit dat ik een aangepast berichttype heb gebruikt, maakt het gemakkelijk voor mijn klant om eigen offertes toe te voegen zodra de site wordt gestart. Elk van hen heeft gewoon een berichttitel en geen inhoud, want als er post-inhoud was, zou de plug-in beide tonen.
De volgende stap is het installeren en configureren van de slider plug-in. Ik gebruik de Smooth Slider-plug-in, waarmee je kunt kiezen welke berichten aan de schuifregelaar worden toegevoegd en je berichten handmatig opnieuw kunt ordenen in het instellingenscherm van de schuifregelaar.
Ga naar Vloeiende schuifregelaar> Instellingen en configureer het als volgt:
Ik voeg stijl toe aan mijn stylesheet omdat ik Google-lettertypen wil gebruiken, dus ik maak me geen zorgen om de instellingen voor de lettertypen, maar je kunt deze het beste aanpassen in het instellingenscherm.
De volgende stap is om de schuifregelaars toe te voegen en ze te vullen met berichten.
We moeten twee schuifregelaars toevoegen: één voor elk van de twee personen. Ga naar Smooth Slider> Sliders en klik op Maak een nieuwe schuifregelaar. Ik heb mijn twee schuifregelaars 'Heide' en 'Iain' genoemd omdat dit de namen van de mensen zijn.
U voegt berichten aan een schuifregelaar toe vanaf de pagina voor het bewerken van berichten. Open een van je berichten en scrol omlaag om de optie te zien om deze toe te voegen aan een schuifregelaar:
Selecteer de schuifregelaar waaraan u het bericht wilt toevoegen en sla het op. Herhaal dit voor elke post en voeg het toe aan de relevante schuifregelaar.
U kunt de volgorde waarin berichten door de schuifregelaar worden getoond handmatig bewerken. Ga naar Smooth Slider> Sliders en selecteer de schuifregelaar waarmee u wilt werken. Dit is mijn schuifregelaar 'Heide':
Scrol omlaag om de berichten naar de juiste volgorde te slepen:
Sla de schuifknop op als je dit hebt gedaan.
Op dit moment hebben we twee schuifregelaars, maar deze verschijnen niet op de site. De plug-in geeft u shortcodes die u kunt gebruiken om schuifregelaars toe te voegen aan uw site: omdat we ze zullen toevoegen in de themabestanden, gebruiken we de do_shortcode () functie.
Het Responsieve thema biedt ons een haak genoemd responsive_in_header waarmee je code aan de paginakop kunt toevoegen. Dit wordt boven de afbeelding maar in de kop weergegeven: we voegen CSS toe om de schuifregelaars correct te plaatsen in het volgende deel van deze tweedelige zelfstudie.
Open uw thema's functions.php bestand en voeg deze functie toe:
functie tutsplus_slider () ?>Dit creëert een
divmet detutsplus-slidersklasse, die we later zullen proberen te positioneren en de shortcodes gebruiken om de twee schuifregelaars uit te voeren.Sla uw functiedossier op.
De site ziet er nu als volgt uit:
Dus de schuifregelaars zijn er en ze werken. Maar ze nemen een enorme hoeveelheid witruimte in aan de bovenkant van de pagina, boven de afbeelding. We willen dat ze over het beeld worden weergegeven, naast de twee mensen.
In het volgende deel zullen we dat gaan oplossen. We voegen CSS toe voor het positioneren van de twee schuifregelaars, en ook voor styling. We registreren een Google-lettertype dat voor de offertes wordt gebruikt.
Samenvatting
Schuifregelaars zijn niet alleen voor afbeeldingen: u kunt ze ook gebruiken om tekst weer te geven. In deze zelfstudie hebt u geleerd hoe u twee schuifregelaars kunt instellen met behulp van een aangepast berichttype. Vervolgens voegen we de stijl toe om onze tekst er uit te laten zien zoals het hoort.
