Añadiendo funcionalidades en WordPress sin utilizar plugins
Fernan Díez Colaboraciones 23/02/2018
Probablemente el título del artículo te pueda dar una idea equivocada del tema en concreto sobre el que vamos a hablar en esta ocasión.
En efecto, hablaremos sobre cómo añadir funcionalidades en WordPress sin utilizar plugins, pero sobre todo daremos algunos pasos iniciales para aprender a utilizar WordPress y complementarlo siguiendo unas buenas prácticas.
Cuando trabajamos con WordPress tenemos a nuestra disposición el repositorio oficial de plugins donde podremos encontrar soluciones que nos permiten modificar o ampliar las funcionalidades que por defecto incluye el núcleo de WordPress.
Es fantástico poder encontrar solución a la práctica totalidad de problemas que nos podemos encontrar a la hora de enfrentarnos a un proyecto con WordPress y que esas soluciones vengan de la mano de la comunidad de desarrolladores.
Pero el uso indiscriminado de plugins puede tener sus contraprestaciones.
Instalación de plugins indiscriminada
Además de añadir un elemento más a la lista de elementos que debemos actualizar y mantener en nuestro proyecto pueden producirse incompatibilidades con otros plugins e incluso pueden abrir agujeros de seguridad en nuestro sitio web.
Pero quizás el mayor de los inconvenientes que nos podemos encontrar es que podemos acabar desarrollando sitios web en función de los plugins que encontremos en nuestro camino y adaptarnos a las soluciones preestablecidas en lugar de crear nuestras propias soluciones.
Esto puede acabar con casos que se parezcan bastante a los siguientes:
- Instalamos una herramienta que nos ofrece más opciones de las necesarias o que incluye código innecesario
- No aprendemos a crear soluciones personalizadas y nos conformamos con la tranquilidad de trabajar en un ecosistema que conocemos.
Comenzando a crear soluciones optimizadas
Deberíamos intentar pensar en crear nuestras propias soluciones estableciendo las necesidades justas para cada proyecto o situación.
Y como objetivo inicial creo que es importante que comencemos con algunas premisas básicas como pueden ser las de reutilizar el código que previamente hayamos desarrollado y aligerar la carga del sitio web evitando peticiones innecesarias.
Reutilizar código
Si trabajamos con fragmentos de código reutilizables podremos conseguir completar proyectos futuros en menor tiempo y controlar en cada momento lo que está sucediendo en nuestro proyecto.
Es interesante recopilar nuestro código en cualquier repositorio público o privado que nos permita a futuro poder aplicarlo en otros proyectos incluso mejorarlo a medida que vayamos encontrando posibles implementaciones.
Personalmente guardo en formato gist muchos snippets de código que creo que me van a ser útiles en el futuro, y los voy revisando si es que encuentro formas en las que puedo mejorarlos a medida que los aplico. Además, al ser públicos, cualquiera puede encontrarlos y usarlos a su antojo, del mismo modo que nosotros también hacemos cuando utilizamos fragmentos de código que encontramos en la red.
Aligerar la carga
Cuando instalamos un plugin del repositorio lo más habitual es que se generen algunas peticiones extra para servicios que realmente quizás no tengamos ni que utilizar. Si pensamos en la optimización del rendimiento cualquier petición extra que añadamos al código debería ser justificada.
Como ejemplo, que además analizaremos más adelante, existe una cantidad ingente de plugins en el repositorio de WordPress que nos permite añadir botones para compartir en redes sociales. Muchos de ellos hacen llamadas a cada una de las plataformas, cuando, si pensamos en mejorar el rendimiento y velocidad de esa utilidad, podrían resultar innecesarias.
Y hablando de reutilizar código y seguir buenas prácticas vamos a analizar paso a paso cómo podríamos evitar la instalación de uno de esos plugins tan populares para compartir contenido en redes sociales con tan solo utilizar algunas líneas de código.
Añadiendo funcionalidades sin utilizar plugins
Con las premisas que hemos anunciado anteriormente vamos a ver paso a paso cómo crear una funcionalidad para añadir botones para compartir en redes sociales al final de nuestro contenido publicado en WordPress
En primer lugar necesitaremos añadir el siguiente código en el archivo functions.php de nuestro tema activo. Podemos comprobar como definimos en primer lugar algunas variables de función con parámetros relacionados con el formato de enlace necesario para crear la URL para compartir el enlace que estamos visitando en cada una de las redes sociales con las que trabajaremos como Twitter, Facebook o LinkedIn.
A continuación mediante el filtro al que llamamos en la función intervenimos en el contenido de la publicación para imprimir el código HTML necesario dentro de diferentes clases de CSS.
function simpleshare_socialbuttons($content) { global $post; if(is_single() || is_page()){ // Get current page URL $simpleshareURL = urlencode(get_permalink()); // Get current page title $simpleshareTitle = str_replace( ' ', '%20', get_the_title()); // Get Post Thumbnail $simpleshareThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); // Construct sharing URL $twitterURL = 'https://twitter.com/intent/tweet?text='.$simpleshareTitle.'&url='.$simpleshareURL.'&via=simpleshare'; $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$simpleshareURL; $googleURL = 'https://plus.google.com/share?url='.$simpleshareURL; $linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$simpleshareURL.'&title='.$simpleshareTitle;
// Add sharing button at the end of post/page content $content .= 'class="simpleshare-social>'; $content .= 'Share class="simpleshare-link simpleshare-twitter" href="'. $twitterURL .'" target="_blank">Twitter'; $content .= 'class="simpleshare-link simpleshare-facebook" href="'.$facebookURL.'" target="_blank">Facebook'; $content .= 'class="simpleshare-link simpleshare-googleplus" href="'.$googleURL.'" target="_blank">Google+'; $content .= 'class="simpleshare-link simpleshare-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn'; $content .= ''; return $content; }else{ // if not a post/page then don't include sharing button return $content; } }; add_filter( 'the_content', 'simpleshare_socialbuttons');
Para dar los estilos correctos a los botones vamos a crear unas líneas sencillas de CSS que podremos añadir en la hoja de estilo de nuestro tema hijo instalado.
.simpleshare-link { padding: 2px 8px 4px 8px !important; color: white; font-size: 12px; border-radius: 2px; margin-right: 2px; cursor: pointer; -moz-background-clip: padding; -webkit-background-clip: padding-box; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); margin-top: 2px; display: inline-block; text-decoration: none; } .simpleshare-link:hover,.simpleshare-link:active { color: white; } .simpleshare-twitter { background: #00aced; } .simpleshare-twitter:hover,.simpleshare-twitter:active { background: #0084b4; } .simpleshare-facebook { background: #3B5997; } .simpleshare-facebook:hover,.simpleshare-facebook:active { background: #2d4372; } .simpleshare-googleplus { background: #D64937; } .simpleshare-googleplus:hover,.simpleshare-googleplus:active { background: #b53525; } .simpleshare-linkedin { background: #0074A1; } .simpleshare-linkedin:hover,.simpleshare-linkedin:active { background: #006288; } .simpleshare-social { margin: 20px 0px 25px 0px; -webkit-font-smoothing: antialiased; font-size: 12px; }
Con este código, sencillo, optimizado y reutilizable para cualquier proyecto podremos prescindir de cualquier otro plugin de redes sociales que probablemente incorporará funciones que no necesitamos y cuyo rendimiento será peor.
Es un ejemplo sencillo, en efecto, pero si pensamos en más elementos necesarios en nuestros proyectos web podremos lograr reunir un gran número de soluciones que harán, en su suma, conseguir mejores resultados, conocer mejor el funcionamiento de los hooks de WordPress, y ahorrarnos tiempo a futuro consiguiendo mejores resultados.