Een set Responsive Grid Shortcodes toevoegen aan uw WordPress-site

Vandaag nemen we een aangepast basisraster gemaakt met CSS en integreren het in WordPress via shortcodes. Ik neem aan dat alle lezers een basiskennis van CSS hebben, dus ik zal hier hier niet over praten, ik neem ook aan dat je al een WordPress-themainstelling hebt en we voegen gewoon bits toe. Genoeg gezegd, laten we vastzitten in!

Stap 1: Ons CSS-raster

Voordat we beginnen, gaan we door en maken we een css map en vervolgens een bestand binnen genaamd grid.css. Vanwege de hoeveelheid mobiel en tabletgebruik nu dagen, gaan we door en voegen we ook het responsieve deel toe aan ons raster. Ik ben doorgegaan en heb hierop gereageerd om het minder verwarrend te maken voor iedereen die er nog niet bekend mee is.

 / * ------------------------------------------------ ---------------------- * / / * Aangepast raster / * -------------------- -------------------------------------------------- * / .container margin: 0 auto; width: 940px; position: relative;  .container .one-half, .container .one-third, .container .one-fourth, .container .two-thirds, .container .three-fourths float: left; margin-right: 20px;  .container .een. half.last, .container .een-derde.last, .container .een-vierde.last, .container .twee-derde. duur, .container .three-fourths.last margin-right: 0;  .container .een halve width: 460px;  .container .een derde width: 300px;  .container .een vierde width: 220px;  .container .twee-derde width: 620px;  .container .three-fourths width: 700px;  / * ------------------------------------------- * / / * Responsief raster - / * 1. Tablet / * 2. Mobiel portret / * 3. Mobiel landschap / * ---------------------------- --------------- * / @media alleen scherm en (min-breedte: 768px) en (max-width: 959px) .container width: 748px;  .container .een-halve width: 364px;  .container .een derde width: 236px;  .container .een vierde width: 172px;  .container .twee-derde width: 492px;  .container .three-fourths width: 508px;  @media alleen scherm en (max-width: 767px) .container width: 300px;  .container .one-half, .container .one-third, .container .one-fourth, .container .two-thirds, .container .three-fourths width: 300px; margin-right: 0;  @media alleen scherm en (min-breedte: 480px) en (max-breedte: 767px) .container width: 420px;  .container .one-half, .container .one-third, .container .one-fourth, .container .two-thirds, .container .three-fourths width: 420px; margin-right: 0; 

Stap 2: Onze CSS registreren binnen WordPress

Voordat we shortcodes kunnen maken, moeten we het CSS-bestand registreren dat we zojuist hebben gemaakt. We doen dit door te gebruiken wp_register_style en wp_enqueue_style. Zorg ervoor dat je dit in je plaatst functions.php of een ander bestand waarnaar wordt gelinkt via de functions.php het dossier. Ik ben ook verder gegaan en heb dit verpakt in een functie, maar dit is niet nodig. Zodra we ons CSS-bestand hebben gebeld en geregistreerd, moeten we het koppelen met behulp van de add_action functie.

• wp_register_style
• wp_enqueue_style
• add_action

 if (! function_exists ('register_css')) function register_css () wp_register_style ('custom-grid', get_template_directory_uri (). '/css/grid.css'); wp_enqueue_style ( 'custom-grid');  add_action ('wp_enqueue_scripts', 'register_css'); 

Stap 3: Beginnen met het maken van onze shortcodes

Om alles schoon te houden, maken we een nieuw bestand met de naam shortcodes.php om onze shortcodes gescheiden te houden van andere functies, moeten we hier ook naar verwijzen binnen onze functions.php het dossier.

 // Inclusief shortcodes inclusief 'shortcodes.php';

Stap 4: De shortcode-API

De Shortcode-API is geweldig, het stelt gebruikers in staat eindeloze dingen mee te maken. U kunt er attributen en waarden doorheen geven. Als u meer wilt weten over de Shortcode API, bezoekt u de Shortcode API-pagina in de WordPress Codex. Om te zien wat shortcodes kunnen doen, zullen we hiervoor twee paden tonen.

Stap 5: Shortcode route 1

Omdat dit een raster is, heeft het kolommen (uiteraard) maar als het bij de laatste kolom komt, moeten we definiëren dat het de laatste kolom is vanwege de manier waarop het aangepaste raster is gecodeerd. Als we bijvoorbeeld een hoofdgebied van tweederde en een zijbalk van een derde hebben. De zijbalk moet als laatste in de rij worden gedefinieerd, dus we zullen een klasse toevoegen laatste ernaar toe.

Nu beginnen we met het maken van onze shortcode, we beginnen met een standaard shortcode van een halve kolom. We beginnen met het maken van een functie met een naam van de shortcode. We zullen dan twee argumenten doorgeven van $ atts en $ inhoud. De manier waarop shortcodes werken is heel eenvoudig, als je een shortcode als deze maakt, hoeven we alleen iets terug te sturen. Alles wat we zullen terugkeren is een div met de klasse van de helft samen met de inhoud erin. Het laatste wat u moet doen is om de shortcode in te schakelen voor gebruik binnen uw WordPress-thema's. Dit gebeurt via de add_shortcode functie. Deze functie accepteert twee parameters, de naam die wordt gebruikt om toegang te krijgen tot de shortcode en de functienaam van de shortcode. We hebben gebruikt 'een helft'voor de naam om toegang te krijgen tot de shortcode, zodat we dit binnen de editor kunnen gebruiken door te typen [een helft].

 functie one_half ($ atts, $ content = null) ga terug '
'. do_shortcode ($ inhoud). '
';  add_shortcode ('one_half', 'one_half');

Nu, als we terugkijken, hebben we gesproken over het definiëren van de laatste kolom. Voor deze route maken we gewoon een andere shortcode, maar in plaats van [een helft], we zullen gebruiken [One_half_last] terwijl de klassenaam wordt gewijzigd van

 functie one_half_last ($ atts, $ content = null) ga terug '
'. do_shortcode ($ inhoud). '
';  add_shortcode ('one_half_last', 'one_half_last');

 functie one_half ($ atts, $ content = null) extract (shortcode_atts (array ('last' => "), $ atts)); if ($ last == 'yes') $ position = 'last'; else $ position = ";  terug '
'. do_shortcode ($ inhoud). '
';  add_shortcode ('one_half', 'one_half');