Crea códigos curtos para o noso tema de WordPress

Desde que comezamos con este proxecto, sempre quixemos que tivese a nosa propia etiqueta, e é por iso que o segundo modelo empregamos Desde Linux, foi creada por nós ao 100%.

Despois seguiron outras versións, e aínda que podemos mercar ou contratar certos servizos web para crear os nosos deseños como os de EstudioDWeb.com, ou mercar modelos xa creados en ThemeForest.net, sempre quixemos ter o noso, adaptado ás nosas necesidades e pasar por alí DesenvolvementoWeb.com pode ser de axuda 😀

De todos os xeitos, me apaixona o deseño e desenvolvemento web e xa estou a traballar no novo tema Desde Linux e amosareiche algunhas capturas de pantalla do seu aspecto.

A idea non é saír do que xa estamos adaptados, polo que moitos elementos seguen sendo iguais ou semellantes. Comezo coa páxina de inicio

captura de pantalla-dl

E así terían os artigos:

captura de pantalla-dl-post

Como podes ver, é axeitada á nosa medida e incluímos novas ShortCodes para a elaboración dos artigos.

Por iso se me ocorreu compartir contigo como crear un deles (o de información) por se os quere incluír nos seus temas de WordPress. Quero dicir, algo así:

Este será o exemplo ShortCode

Non son experto en programar con este CMS, polo que non vou intentar explicar por que e como funciona deste xeito, só vou amosarche como facelo, punto.

Para iso facemos uso do «coitelo suízo» de WordPress, Refírome ao ficheiro función.php que normalmente atopamos en case todos os temas.

Soporte_Función

Exemplo de Function.php cos ShortCodes de DesdeLinux

O que faremos neste ficheiro é engadir a estrutura do noso ShortCode e, por suposto, a etiqueta que o mostra. Entón, imos a el.

Dentro da función.php

Dentro do noso ficheiro function.php o que poñeremos será a estrutura HTML do ShortCode, pero non é simplemente poñer as etiquetas HTML así. Teríamos algo así:

// Información da función de información ($ atts, $ content = null, $ code = "") {$ return = ' '; $ devolución. = $ contido; $ devolución. = ' '; devolver $ devolver; } // O ShortCode add_shortcode ('info', 'infobox');

A partir de aquí aclaramos un par de cousas. Primeiro, cando usamos dúas barras comentamos a liña, polo tanto // Información só é un comentario.

O nome da función, neste caso infobox Pódese cambiar ao que queiramos, pero debe coincidir co nome que empregamos na última liña.

En cada un $ devolución devolvemos o que foron as etiquetas HTML e debemos ter en conta que despois da primeira debemos engadir un punto diante do sinal de igualdade e a liña remata cun sinal de punto e coma

exemplo:

$ devolución. = $ contido;

Variable $ contido que é onde o contido que poñemos no ShortCode vai por defecto, devolverá un valor nulo se non poñemos nada.

Agora, o nome do ShortCode é o que definimos:

add_shortcode( 'info', 'infobox' );

Onde podes cambiar información para o que queremos. Agora, para que pareza o exemplo debemos poñer:

[ info ]Este será el ShortCode de ejemplo[ /info ]

Aínda que por suposto, sen os espazos, cousa que poño porque obviamente o ShortCode estaría activado.

Estilo ShortCode

Se observas a liña superior, sen o código e as variables PHP, o ShortCode en HTML puro tería algo así:

<div class="alert-info"></div>

Polo tanto, só temos que aplicar o estilo CSS.

.alert.alert-info {fondo: url # d9edf7 (info.png) sen repetición 7px 50%; radio de bordo: 4 px; bordo: 1px sólido # bce8f1; cor: # 3a87ad; tamaño da fonte: 14px; marxe: 15px 15px; relleno: 15px 15px 15px 50px text-align: left}

E xa está .. Repito, non son programador nin nada polo estilo, e a explicación que dei é como entendo que funciona o ShortCode 😛


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

9 comentarios, deixa os teus

Deixa o teu comentario

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados con *

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

  1.   sobrante72 dixo

    Gústame o seu aspecto, felicítote.

    1.    elav dixo

      Grazas, tes moito camiño por percorrer pero grazas

  2.   Rogers dixo

    Moi ben !! Encantaríame un tema así no meu WP.
    Felicítote!

    1.    elav dixo

      Aínda non o puxen, podo venderte HAHAHAHAHA .. Só de broma 🙂

  3.   Manuel E. dixo

    Excelente, grazas por compartir.
    Este tipo de recursos é moi necesario na web, explicando as cousas con claridade.

    Saúdos!

  4.   eliotime3000 dixo

    Fermoso deseño. A ver se para o meu sitio web podes darme ese modelo para personalizalo.

  5.   corvo291286 dixo

    que se pode facer en blogger?

  6.   Javier dixo

    Ben, nada, púxeno como está e non me funciona, que podería ser? : /

    Poño información [info] [/ info]

    e na miña publicación de wordpress só aparece: información, os corchetes desaparecen, creo que algo non funciona: /

    1.    Johnny Silva dixo

      Quizais no teu modelo os ShortCodes non estean definidos no function.php como no meu caso, estes valores engádense nun ficheiro chamado shortcodes.php do meu tema