Agregar en WordPress scripts, código y elementos adicionales

A la gran mayoría de los que poseemos un blog de WordPress y deseamos personalizarlo y configurarlo a nuestro gusto, nos será de gran ayuda conocer ciertas reglas elementales.
En este sencillo tutorial dirigido a aficionados, explico cómo insertar o agregar varios tipos de elementos en el código, sin afectar el funcionamiento del sitio y sin tener que instalar plugins adicionales.

Como agregar instrucciones y código en WordPress

Las instrucciones o el código se pueden agregar de varias formas en WordPress:
En este artículo explico cómo realizar varias modificaciones en las páginas, agregando las instrucciones desde un plugin personal.

Crear un plugin de prueba en WordPress

Sigue los siguientes pasos para crear un plugin:
A partir de este momento las instrucciones que se agreguen a dicho archivo, serán ejecutadas por WordPress.

Para probar los siguientes ejemplos introduce las instrucciones en el plugin, carga cualquier página del blog en el navegador y comprueba el código fuente (Control + U).

Agregar scripts o metadatos en el encabezado

El encabezado o área del head de las páginas contiene solo instrucciones para la representación de esta en el navegador, metaetiquetas, información para los buscadores y donde se cargan las hojas de estilo y otros scripts indispensables, para asegurarse que se encuentren en la memoria cuando se muestre el contenido.

Agregar un script en el encabezado.

function agregar_head1() {
  ?>
    <script async src="//platform.twitter.com/widgets.js"></script>
  <?php
}
add_action( 'wp_head', 'agregar_head1' );

De esta forma dicho script se agrega en todas las páginas del sitio, usando el modo de carga async (asíncrono).
De forma similar a la anterior, puede agregarse metadatos, metalinks, hojas de estilo u otros elementos.

Agregar una metaetiqueta en el head, solo en algunas páginas

function agregar_head2() {
     if( is_single( array( 123, 124, 125 ) )  ){
  ?>
    <meta name="Robots" content="noindex, nofollow">
  <?php
  }
}
add_action( 'wp_head', 'agregar_head2' );

Agregamos la etiqueta solo en algunas publicaciones, usando un condicional y especificando su identificador (ID).
Este se puede obtener en el panel Todas las entradas.
Lee la lista y uso de etiquetas condicionales en WordPress

Agregar scripts en el area del footer

En el área del footer o pie de página es el lugar ideal para situar scripts u otros elementos que cargan después del cuerpo de la página, por lo que no afectan su desempeño.
Es el lugar donde frecuentemente se agregan los scripts de Google Analytics, Búsqueda personalizada y en muchos casos los que cargan fuentes adicionales para el estilo desde Google Fonts u otros repositorios.

Agregar un script externo en el pie de página

function agregar_footer1() {
?>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<?php
}
add_action( 'wp_footer', 'agregar_footer1' );

Agregar una hoja de estilo CSS adicional en el footer

Se usa el modo condicional, para insertar el CSS solo si se trata de páginas de categorías.

function agregar_footer2() {
 if( is_category()){
?>
	<link href="estilo_adicional.css" rel="stylesheet">
	<?php
}}
add_action( 'wp_footer', 'agregar_footer2' );

Introducir texto en el pie de página

function agregar_footer3(){
   echo "<div style='text-align:center;'>MENSAJE DE TEXTO</div>";
}
add_action('wp_footer','agregar_footer3');

Agregar elementos en el contenido principal

Agregar texto o enlaces en las páginas

Agregar un mensaje de texto con un enlace, al final del contenido, pero solo en los posts o publicaciones, no en páginas, ni categorías.

function agregar_content1($content) {
 if( is_single() ){  
$content.= "<h3>¿Te interesa el contenido?</h3>";
$content.= "<p>No dejes de revisar las publicaciones en mi otro sitio: <a href='http://otrositio.com'>Otro sitio</a></p>";
}
return $content;
}
add_filter ('the_content', 'agregar_content1');

Insertar botón y widget de Facebook bajo el contenido

Insertar el botón de compartir y el cuadro de Page Plugin, al terminar el contenido, pero solo en esta página.
Para eso es necesario sustituir 231 (la identidad de esta página) por la correspondiente.
Se requiere dos códigos, uno para el contenido y otro para agregar el script en el footer.

function agregar_contentfb($content) {
 if( is_single(array( 231 )) ){ 
$content.= '<div class="fb-like" data-send="true" data-width="292" data-show-faces="true"></div>'; 
$content.= '<div class="fb-page" 
  data-href="https://www.facebook.com/norfipc.face"
  data-width="500" 
  data-hide-cover="true" 
  data-show-posts="false"></div>
  <div id="fb-root"></div>';
}
return $content;
}
add_filter ('the_content', 'agregar_contentfb');
//////
function agregar_footerfb() {
 if( is_single(array( 231 )) ){
?>
	<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
	<?php
}}
add_action( 'wp_footer', 'agregar_footerfb' );    

¿Cómo realizar pruebas en WordPress?

Para este tipo de pruebas lo ideal es instalar WordPress en una computadora local, mediante XAMPP, que instala Apache, MySQL y PHP.
Después de eso podemos copiar nuestra base de datos desde la red e importarla.
Al finalizar podemos copiar los archivos modificados al servidor mediante SFTP.

Otras páginas relacionadas

✓ Como modificar y personalizar mi tema de WordPress
✓ Como usar y configurar WordPress sin plugins
✓ Convertir los enlaces externos en NoFollow en WordPress


Comparte

Sígueme en las redes sociales