Legge til et sett med Responsive Grid Shortcodes til ditt WordPress-nettsted

I dag skal vi ta et grunnleggende tilpasset rutenett opprettet med CSS og integrere det i WordPress via kortkoder. Jeg antar alt du lesere har en grunnleggende forståelse av CSS, så jeg vil ikke dekke noe av det her, jeg vil også anta at du allerede har et WordPress-temaoppsett allerede, og vi vil bare legge til biter. Nok sagt, kan vi få sitter fast i!

Trinn 1: Vår CSS Grid

Før vi starter, går vi videre og lager en css mappe og deretter en fil inne kalt grid.css. På grunn av mengden mobil- og nettbrettbruk nå dager, går vi videre og legger til den responsive delen for nettverket vårt også. Jeg har gått videre og kommentert dette for å gjøre det mindre forvirrende for alle som ikke allerede er kjent med det.

 / * ------------------------------------------------ ---------------------- * / / * Custom Grid / * -------------------- -------------------------------------------------- * / .container margin: 0 auto; bredde: 940px; stilling: i forhold;  .container. en-halv, .container. en-tredjedel, .container. en-fjerde, .container. to tredjedeler, .container. tre fjerdedeler float: left; margin-right: 20px;  .container .one-half.last, .container .one-third.last, .container .one-fourth.last, .container .two-thirds.last, .container.three-fourths.last margin-right: 0;  .container. one-half width: 460px;  .container. one-third width: 300px;  .container .one-fourth width: 220px;  .container .two-thirds width: 620px;  .container.three-fourths width: 700px;  / * ------------------------------------------- * / / * Responsive Grid - / * 1. Tablet / * 2. Mobil Portrett / * 3. Mobil Landskap / * ---------------------------- --------------- * / @media bare skjerm og (min bredde: 768px) og (maks bredde: 959px) .container width: 748px;  .container. one-half width: 364px;  .container. one-third width: 236px;  .container .one-fourth width: 172px;  .container .two-thirds width: 492px;  .container.three-fourths width: 508px;  @media bare skjerm og (maksimal bredde: 767px) .container width: 300px;  .container. en halv, .container. en tredjedel, .container. en fjerde, .container. tre tredjedeler, .container. tre fjerdedeler bredde: 300px; margin-right: 0;  @media bare skjerm og (min bredde: 480px) og (maks bredde: 767px) .container width: 420px;  .container. en halv, .container. en tredjedel, .container. en fjerde, .container. tre tredjedeler, .container. tre fjerdedeler bredde: 420px; margin-right: 0; 

Trinn 2: Registrering av vårt CSS innen WordPress

Før vi kan hoppe inn i å lage noen kortkoder, må vi registrere CSS filen vi nettopp har opprettet. Vi gjør dette ved å bruke wp_register_style og wp_enqueue_style. Pass på å plassere dette i din functions.php eller en annen fil som er koblet til via functions.php fil. Jeg har også gått og pakket inn i en funksjon, men dette er ikke nødvendig. Når vi har kalt og registrert vår CSS-fil, må vi koble den ved hjelp av ADD_ACTION funksjon.

• wp_register_style
• wp_enqueue_style
• ADD_ACTION

 hvis (! 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'); 

Trinn 3: Begynner å lage våre kortkoder

For å holde alt rent vil vi opprette en ny fil som heter shortcodes.php For å holde kortnummerene våre skilt fra noen andre funksjoner, må vi også koble til dette i vår functions.php fil.

 // Inkluder kortnumre inkluderer 'shortcodes.php';

Trinn 4: Shortcode API

Shortcode API er strålende, slik at brukerne kan lage endeløse ting med det. Du kan sende attributter og verdier gjennom det. Hvis du vil lese mer om Shortcode API, kan du gå til Shortcode API-siden i WordPress Codex. For å se hvilke kortkoder som kan gjøres, viser vi to baner for dette.

Trinn 5: Kortnummer Rute 1

Fordi dette er et rutenett, vil det ha kolonner (selvsagt), men når det kommer til den siste kolonnen, må vi definere at den er den siste kolonnen på grunn av hvordan det tilpassede rutenettet er kodet. For eksempel, hvis vi hadde et hovedområde på to tredjedeler og et sidebar på en tredjedel. Sidebjelken må definere som den siste i raden, så vi vil legge til en klasse av siste til det.

Nå begynner vi å lage vår shortcode, vi starter med en grunnleggende halvkolonne kortkode. Vi starter med å lage en funksjon med et navn på kortnummeret. Vi sender så to argumenter av $ att og $ innhold. Måten kortnummer arbeid er veldig enkelt, hvis du oppretter en shortcode som dette alt vi trenger å gjøre er å returnere noe. Alt vi kommer tilbake er en div med halvklassen sammen med innholdet i den. Den siste tingen å gjøre er å aktivere kortnummeret for bruk i WordPress-temaene. Dette gjøres via add_shortcode funksjon. Denne funksjonen aksepterer to parametere, navnet som brukes til å få tilgang til kortnummeret og funksjonsnavnet til kortnummeret. Vi har brukt 'en halv'for navnet for å få tilgang til kortnummeret slik at vi kan bruke dette i redaktøren ved å skrive [en halv].

 funksjon one_half ($ atts, $ content = null) return '
'. do_shortcode ($ content). '
';  add_shortcode ('one_half', 'one_half');

Nå, hvis vi ser tilbake, snakket vi om å definere den siste kolonnen. For denne ruten vil vi ganske enkelt opprette en annen shortcode, men i stedet for [en halv], vi skal bruke [One_half_last] mens du endrer klassenavnet fra

 funksjon one_half_last ($ atts, $ content = null) return '
'. do_shortcode ($ content). '
';  add_shortcode ('one_half_last', 'one_half_last');

 funksjonen en_half ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('last' => "), $ atts)), hvis ($ siste == 'ja') $ position = 'last'; ellers $ position = ";  komme tilbake '
'. do_shortcode ($ content). '
';  add_shortcode ('one_half', 'one_half');