PHP Altruisas Ocio Eventos Cursos Las Palmas
//

El archivo ‘Functions’ para personalizar un sitio de WordPresss con PHP

Dentro de todos los archivo que se incluyen en un tema de WordPress encontramos uno con unas características especiales. Este es ‘functions.php’. En él se pueden añadir funciones PHP para que queden juntas a las funciones ya nativas de WordPress.

Se pueden agregar, dentro del fichero ‘functions.php’, funcionalidades con archivos JavaScript, archivos CSS, idiomas, añadir menús, sidebars, etc.; incluso, es posible la modificar las funciones nativas o crear funciones nuevas. Incluso, dentro de las particularidades se puede llamar a otros archivos PHP, que estarán en directorios anexos del tipo inc o includes, por razones de organización y con el objetivo de no sobrecargar el archivo que nos ocupa, ‘functions.php’.

Como se comentó al principio todos los temas disponen de este fichero y estará más o menos completo según el la complejidad de los mismos. La potencia de este fichero es tal que permite incluir funciones tanto para el lado del internauta (front-end) y el lado administración (front-back).

En este artículo vamos a descubrir como poder añadir funciones y, además, ver la importancia de este archivo, qué repetimos, está ligado con el tema instalado.

1.- Creación de una función sencilla


De la misma forma que en PHP añadiremos al fichero ‘functions.php’ del tema una función que posteriormente tendremos a disposición para utilizarla cuando la necesitemos. La función añadida puede ser llamada en cualquier fichero de nuestro tema por ejemplo en index.php, header.php o footer.php.

Añadiremos en functions.php la función

<?php 
   function funcion_sencilla (){
      return 'Esta es la función sencilla de Altruistas.org';
}?>

Llamaremos a la función desde el fichero de nuestro interés como por ejemplo desde header.php. Antes de la llamada hay que comprobar que la función existe para evitar generar un error.

<?php
   if function_exists ('funcion_sencilla') {
     echo funcion_sencilla;
?>

2.- Mostrar una imagen


Se añade en el fichero functions.php del tema en uso la siguiente función que añade una imagen

<?php 
   function muestro_imagen (){ 
      return '<img src="https://altruistas.org/images/ejemplos
      /mi_imagen.png" alt="mi imagen" />'; 
   } 
?>

En la plantilla de página del tema, en el archivo PHP donde se deba mostrar la imagen (para nosotros en header.php como ejemplo), codificaremos lo siguiente:

<?php 
   if function_exists ('funcion_sencilla') {
   echo funcion_sencilla; 
?>

3.- Creación de una función miga de pan


Dentro del fichero functions.php se escribe el código para generar una función que genera una sucesión de enlaces que muestran al internauta dónde se encuentra en la web. Este mecanismo se denomina miga de pan o breadcrumb en inglés.

Dentro del tema del sitio se mostrará en todas las páginas excepto en la página principal.

<?php function miga_pan (){
   global $post;
   if (!is_home ()) {
      $miga = 'Está aquí: ';
      $miga.='<a href="'.get_bloginfo ('wpurl').'">';
      $miga.= get_bloginfo ('name');
      $miga.='</a> > ';
      $parents = array_reverse (get_ancestors ($post->ID, 'page'));
      foreach ($parents as $parent){
         $miga.='<a href="'.get_permalink($parent).'">';
         $miga.= get_the_title ($parent);
         $miga.= '</a> > ';
      }
         $miga.= $post->post_title;
   }
   return $miga;
}?>

Esta función, que debe incluirse en el fichero ‘functions.php’ del tema en uso, hay que llamarla desde una plantilla de página que esté sirviendo para la visualización del propio tema. Por ejemplo, la incluimos de esta forma en el archivo header.php del tema Twenty Seventeen.

[,etc.]
</header><!-- #masthead -->
<?php
   if (function_exists('miga_pan')){
      echo miga_pan();
}?>
<div class="site-content-contain">

Para poder mostrar los enlaces padre utilizaremos la función get_ancestors() que devuelve un array PHP con todas las páginas padre.

Esta función de WordPress tiene la siguiente disposición: <?php get_ancestors ($id, $type); ?>

  • $id: acepta el id del hijo
  • $type: acepta un tipo de objeto (una página, categoría, etc.).

4.- Crear una función para ver las entradas de una categoría con el objeto WP_Query


[Pendiente]

5.- Una función sencilla con get_posts() y con WP_Query


[Pendiente]

6.- Añadir un enlace «leer más» a los resúmenes


[Pendiente]

7.- Añadir hojas de estilo y scripts


Los archivos CSS y JavaScript pueden ser cargados en el archivo hearder.php de WordPress y, también, en el archivo footer.php se pueden hacer llamadas a los archivos JavaScript. Eso utilizando las clásicas etiquetas HTML.

Sin embargo, gracias a las funciones nativas de WordPress puede encontrarse otra forma de hacer lo mismo. Utilizar estas funciones mencionadas es utilizar indirectamente las funciones wp_head() y wp_footer () propias para los archivos CSS y JavaScript, gracias a los hooks.

WordPress pone a disposición del programador una librería de scripts que pueden utilizarse de manera sencilla. Todas estas opciones son fundamentales para poder crear plugins y widgets.

Forma de añadir hojas de stilo CSS y scripts de JavaScript

Para los estilos utilizaremos las siguientes funciones: wp_register_style y wp_enqueue_style

Para los scripts serán las siguientes funciones: wp_register_script y wp_enqueue_script

Explicación de las funciones.

  • wp_register_style ($key, $src, $deps, $ver, $media)
  • wp_enqueue_style ($key, $src, $deps, $ver, $media)
  • wp_register_script ($key, $src, $deps, $ver, $footer)
  • wp_enqueue_script ($key, $src, $deps, $ver, $footer)

$key: corresponde a un nombre obligatorio único que va a servir de clave del archivo

$src: es la url del archivo que se ha de añadir. Puede utilizar la función de WordPress get_template_directory_uri() para indicar el directorio del tema (o la función get_stylesheet_directory() para las URL hijas, en caso de un tema hijo. Si se ha creado un directoroi css o js, la URI tienen la forma: get_template_directory_uri.’/css/nombredelarchivo.css’ , o bien, get_template_directory_uri.’/js/nombredelarchivo.js’

$deps: acepta un array con los nombres clave ($key) de los que depende el archivo. Ejemplo: para un archivo jQuery de JavaScript sería: array (‘jquery’).

$ver:  acepta el nombre de la versión del archivo.

$media: hace referencia a una cadena que especifica el recurso multimedia par el que se ha definido la hoja de estilos. Los valores pueden ser: all, screen, handheld, print.

$footer: Se asigna true si lo que quiere es ubicar la llamada del archivo al pie de la página (footer), junto antes de la etiqueta </body>.

Las funciones de adición solo funcionan si, en el tema, están presentes las funciones wp_head() y wp_footer()

Script disponibles en WordPress

Como WordPress utiliza jQuery son muchos los scripts disponibles. Entre ellos encontramos la suite completa de jQuery UI, Masonry, Jcrop, ThickBox, Iris (color picker), Plupload, TinyMCE, etc.

Para añadir un script, WordPress necesita el nombre clave que hace referencia al script. La lista completa la encontramos en la página de referencia.

Por ejemplo: wp_enueue_script (‘iri’); Esta función activará los archivos JavaScript de Iris.

¿Cómo crear una función en el archivo functions.php y añadir estilos y scripts ?

Observemos este ejemplo para su uso en un fichero functions. El método pasa por declarar una función donde se introducen tanto las sentencias wp_enqueue_style como wp_enqueue_script para tras la función declarar el hook de acción wp_enqueue_scripts haciendo referencia a la función recién declarada.

function adicion_css_y_js(){ wp_enqueue_style { ‘mi-estilo’, get_template_directory_uri().’/css/miestilo.css, array() ); wp_enqueue_script( ‘mi-script’, get_template_directory_uri().’/js/miscript.js’, array(‘jquery’), ‘1.0’, true ); } add_action (‘wp_enqueue_scripts’, ‘adicion_css_y_js’);

Y observamos su uso en un ejemplo real como es en el fichero functions.php del tema twentyseventeen de WordPress.

(solo se incluye una parte de la función)

/**
* Enqueues scripts and styles.
*/
function twentyseventeen_scripts() {
// Add custom fonts, used in the main stylesheet.
wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null );
// Theme stylesheet.
wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri(), array(), '20190507' );
// Theme block stylesheet.
wp_enqueue_style( 'twentyseventeen-block-style', get_theme_file_uri( '/assets/css/blocks.css' ), array( 'twentyseventeen-style' ), '20190105' );
   wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '20190121', true );
wp_enqueue_script( 'jquery-scrollto', get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ), array( 'jquery' ), '2.1.2', true ); } add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' ); /**

Para finalizar este apartado, hay que aclarar que functions.php no es el lugar exclusivo el uso de estas sentencias nativas para cargar hojas de estilos y scripts sino que pueden utilizarse en la creación de plugins o widgets, por ejemplo.

8.- Crear ubicaciones para los menús


[Pendiente]

9.- Crear Sidebars y zonas para los sidebars


[Pendiente]

10.- Personalizar un tema con add_theme_support()


[Pendiente]

11.- Añadir otro tipos de entradas


[Pendiente]

12.- Añadir taxonomías específicas


 

Comentario

[Pendiente]

 

 

 

 

Deja una respuesta

Your email address will not be published.

html5 y css3
Anterior post

Los selectores jerárquicos en CSS3 y HTML5

Siguiente post

Las etiquetas entre el PHP y el HTML

Latest from PHP