Ajout d'un ensemble de codes courts de grille réactifs à votre site WordPress

Aujourd'hui, nous allons prendre une grille personnalisée de base créée avec CSS et l'intégrer à WordPress via des codes courts. Je présume que tous vos lecteurs ont une compréhension de base de CSS, je ne couvrirai donc pas tout cela ici, je présumerai également que vous avez déjà une configuration de thème WordPress et que nous ajouterons simplement quelques éléments. coincé dans!

Étape 1: notre grille CSS

Avant de commencer, nous allons aller de l'avant et créer un css dossier, puis un fichier à l'intérieur appelé grid.css. En raison de la quantité d'utilisation des téléphones mobiles et des tablettes, nous allons maintenant ajouter la partie réactive à notre réseau. Je suis allé de l'avant et commenté cela pour aider à rendre moins déroutant pour ceux qui ne le connaissent pas déjà.

 / * ---------------------------------------------------- ---------------------- * / / * Grille personnalisée / * -------------------- -------------------------------------------------- * / .container margin: 0 auto; largeur: 940px; position: relative;  .container. un demi, .container. un tiers, .container. un-quart, .container. -deux-troisièmes, .container. trois-quarts float: left; marge droite: 20px;  .container .un demi-dernier, .container. un-tiers.last, .container. un-quatrième.last, .container. -deux-tiers.last, .container. 0;  .container .one-half width: 460px;  .container .one-third width: 300px;  .container .one-quatrieme largeur: 220px;  .container .two-thirds width: 620px;  .container .three-quarts width: 700px;  / * ------------------------------------------- * / / * Grille Responsive - / * 1. Tablette / * 2. Portrait mobile / * 3. Paysage mobile / * -------------------------------- --------------- * / @media only screen et (min-width: 768px) et (max-width: 959px) .container width: 748px;  .container .one-half width: 364px;  .container .one-third width: 236px;  .container .one-third width: 172px;  .container .two-thirds width: 492px;  .container .three-quarts width: 508px;  @ Écran uniquement multimédia et (largeur maximale: 767px) .container width: 300px;  .container. un demi, .container. un tiers, .container. un-quart, .container. -deux-troisièmes, .container. trois-quarts largeur: 300px; marge droite: 0;  @ Écran uniquement multimédia et (largeur minimale: 480px) et (largeur maximale: 767px) .container width: 420px;  .container. un demi, .container. un tiers, .container. un quart, .container. deux tiers, .container. trois-quarts largeur: 420px; marge droite: 0; 

Étape 2: Enregistrement de notre CSS dans WordPress

Avant de pouvoir créer des codes abrégés, nous devons enregistrer le fichier CSS que nous venons de créer. Nous ferons cela en utilisant wp_register_style et wp_enqueue_style. Assurez-vous de placer ceci dans votre functions.php ou un autre fichier qui est lié à via le functions.php fichier. Je suis également allé de l'avant et intégré cela dans une fonction, mais ce n'est pas nécessaire. Une fois que nous avons appelé et enregistré notre fichier CSS, nous devons l’accrocher à l’aide du add_action une fonction.

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

Étape 3: Commencer à créer nos codes courts

Pour que tout reste propre, nous allons créer un nouveau fichier appelé shortcodes.php pour que nos codes abrégés soient séparés de toute autre fonction, nous devrons également établir un lien vers cela dans notre functions.php fichier.

 // Inclure les codes courts include 'shortcodes.php';

Étape 4: l'API Shortcode

L'API Shortcode est géniale, elle permet aux utilisateurs de créer des choses sans fin avec elle. Vous pouvez y transmettre des attributs et des valeurs. Si vous souhaitez en savoir plus sur l'API Shortcode, visitez la page API Shortcode dans le codex WordPress. Pour voir ce que les codes courts peuvent faire, nous allons montrer deux chemins pour cela..

Étape 5: Route 1 en code court

Comme il s’agit d’une grille, elle comportera des colonnes (évidemment), mais lorsqu’elle arrivera à la dernière colonne, nous devrons la définir comme étant la dernière colonne en raison de la manière dont la grille personnalisée a été codée. Par exemple, si nous avions une zone principale de deux tiers et une barre latérale d'un tiers. La barre latérale devra être définie en tant que dernier élément de la ligne. Nous allons donc ajouter une classe de dernier à cela.

Maintenant, nous allons commencer à créer notre shortcode, nous allons commencer avec un shortcode de base d'une demi-colonne. Nous commençons par créer une fonction avec le nom du shortcode. Nous passerons ensuite deux arguments de $ atts et $ contenu. La manière dont fonctionnent les codes abrégés est très simple. Si vous créez un code abrégé comme celui-ci, il vous suffit de renvoyer quelque chose. Tout ce que nous reviendrons est un div avec la classe de la moitié avec le contenu à l'intérieur. La dernière chose à faire est d'activer le shortcode pour qu'il soit utilisé dans vos thèmes WordPress. Cela se fait via le add_shortcode une fonction. Cette fonction accepte deux paramètres, le nom utilisé pour accéder au shortcode et le nom de la fonction du shortcode. Nous avons utilisé 'une moitié'pour le nom d'accéder au shortcode afin que nous puissions l'utiliser dans l'éditeur en tapant [une moitié].

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

Maintenant, si nous regardons en arrière, nous avons parlé de définir la dernière colonne. Pour cet itinéraire, nous avons simplement créé un autre shortcode, mais au lieu de [une moitié], nous allons utiliser [one_half_last] en changeant le nom de la classe de

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

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