Aggiunta di una serie di shortcode reattivi alla griglia al tuo sito WordPress

Oggi prenderemo una griglia personalizzata di base creata con CSS e integrandola in WordPress tramite shortcode. Presumo che tutti i lettori abbiano una conoscenza di base del CSS quindi non ne parlerò qui, presumo anche che tu abbia già impostato un tema per WordPress e aggiungeremo solo dei bit. Detto abbastanza, si ottiene bloccato in!

Passaggio 1: la nostra griglia CSS

Prima di iniziare, procederemo e creeremo un css cartella e quindi un file all'interno chiamato grid.css. A causa della quantità di utilizzo di dispositivi mobili e tablet ora, andremo avanti e aggiungeremo anche la parte reattiva per la nostra rete. Sono andato avanti e ho commentato questo per aiutare a rendere meno confusionario per chiunque non abbia già familiarità con esso.

 / * ------------------------------------------------ ---------------------- * / / * Griglia personalizzata / * -------------------- -------------------------------------------------- * / .container margin: 0 auto; larghezza: 940px; position: relative;  .container .one-half, .container .one-third, .container .one-fourth, .container .two-thirds, .container .three-fourths 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;  / * ------------------------------------------- * / / * Griglia reattiva - / * 1. Tablet / * 2. Mobile Portrait / * 3. Mobile Landscape / * ---------------------------- --------------- * / @media solo schermo e (min-width: 768px) e (max-width: 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 only screen e (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 only screen e (min-width: 480px) e (max-width: 767px) .container width: 420px;  .container .one-half, .container .one-third, .container .one-fourth, .container .two-thirds, .container .three-fourths width: 420px; margin-right: 0; 

Passaggio 2: registrazione del nostro CSS all'interno di WordPress

Prima di poter inserire qualsiasi shortcode, è necessario registrare il file CSS appena creato. Lo faremo usando wp_register_style e wp_enqueue_style. Assicurati di posizionarlo all'interno del tuo functions.php o un altro file a cui è collegato tramite il functions.php file. Ho anche proseguito e lo ho concluso all'interno di una funzione, ma non è necessario. Una volta che abbiamo chiamato e registrato il nostro file CSS, dovremo collegarlo usando il add_action funzione.

• 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'); 

Passaggio 3: iniziare a creare i nostri codici brevi

Per mantenere tutto pulito creeremo un nuovo file chiamato shortcodes.php per mantenere i nostri codici brevi separati da qualsiasi altra funzione, dovremo anche collegarci a questo all'interno del nostro functions.php file.

 // Include shortcode include 'shortcodes.php';

Passaggio 4: l'API Shortcode

L'API Shortcode è brillante, consente agli utenti di creare cose infinite con esso. È possibile passare attributi e valori attraverso di essa. Se desideri saperne di più sull'API Shortcode, visita la pagina API Shortcode nel codice WordPress. Per vedere cosa possono fare gli shortcode, mostreremo due percorsi per questo.

Passaggio 5: Shortcode Route 1

Poiché questa è una griglia, avrà delle colonne (ovviamente) ma quando arriverà all'ultima colonna sarà necessario definirla come ultima colonna a causa di come è stata codificata la griglia personalizzata. Ad esempio, se avessimo un'area principale di due terzi e una barra laterale di un terzo. La barra laterale dovrà essere definita come l'ultima nella riga, quindi aggiungeremo una classe scorso ad esso.

Ora inizieremo a creare il nostro shortcode, inizieremo con uno shortcode base a metà colonna. Iniziamo con la creazione di una funzione con un nome dello shortcode. Passeremo quindi due argomenti di $ atts e $ content. Il modo in cui funzionano gli shortcode è molto semplice, se stai creando uno shortcode come questo tutto ciò che dobbiamo fare è restituire qualcosa. Tutto ciò che torneremo è a div con la classe della metà e il contenuto al suo interno. L'ultima cosa da fare è abilitare lo shortcode per l'uso all'interno dei temi di WordPress. Questo viene fatto tramite il add_shortcode funzione. Questa funzione accetta due parametri, il nome utilizzato per accedere allo shortcode e il nome della funzione dello shortcode. Abbiamo usato 'metà'per il nome per accedere allo shortcode in modo che possiamo usare questo all'interno dell'editor digitando [metà].

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

Ora, se guardiamo indietro, abbiamo parlato della definizione dell'ultima colonna. Per questa rotta creeremo semplicemente un altro shortcode, invece di [metà], useremo [One_half_last] mentre si cambia il nome della classe da

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

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