Los themes que tienen una página de configuración son muy útiles para los usuarios. El desarrollador del theme puede ofrecer al usuarios unas cuantas opciones de personalización para que este configure su theme de forma sencilla y sin complicaciones.
Últimamente estoy comenzando a crear un theme y al igual que hice con mi anterior creación quería que este tuviera una página de opciones.
Buscando por internet sobre la posibilidad de crear una página de opciones para el theme me encontré con este artículo que nos da el código básico para crear una página de opcines de forma sencilla. Solo tendremos que modificar un array para definir las distintas opciones que tendrá nuestra página.
Empezamos
Lo primero es descargar el código base de partida del archivo functions.php del theme desde aquí.
Personalización
Nombre y abreviación
A continuación lo primero que tendremos que hacer es modificar las dos variables que tenemos en las primeras líneas:
-
$themename = "WordPress Classic";
-
$shortname = "wpc";
La primera contendrá el nombre de nuestro theme y la segunda un nombre abreviado que es el que se usará en cada una de las variables que almacenarán las distintas opciones.
Lista de opciones
Justo después de las variables anteriores tenemos el array que contiene las diferentes opciones de configuración que contendrá la página. Por defecto está así:
-
-
"type" => "title"),
-
-
-
"desc" => "Enter a title to display for your welcome message.",
-
"id" => $shortname."_welcome_title",
-
"std" => "",
-
"type" => "text"),
-
-
"desc" => "Text to display as welcome message.",
-
"id" => $shortname."_welcome_message",
-
"type" => "textarea"),
-
-
"desc" => "Check this box if you would like to DISABLE the welcome message.",
-
"id" => $shortname."_welcome_disable",
-
"type" => "checkbox",
-
"std" => "false"),
-
-
-
);
Si estamos acostumbrados al uso de arrays en php no tendremos ningún problema en personalizar el código, si por el contrarío no tenéis ni idea nos asustéis, es más fácil de lo que parece.
Como veis cada array es un elemento de la página de opciones. A priori podemos distinguir tres tipos:
- Títulos de bloque: Es el primero del ejemplo y se usan para comenzar un bloque de opciones añadiendo un título. Su función es meramente estética, y son un
arrayde dos campos:No creo que halla nada que explicar aquí, por un lado está el campo
nameque será lo que viene a ser el título y por otro el campotypeque indica simplemente que es un título. - Campos de apertura y cierre de bloque: también tienen solo una función estética y sirven para abrir o cerrar los bloques donde se contendrán las opciones, por lo tanto habrá uno de apertura antes de un bloque de opciones y otro de cierre justo al final. Su aspecto es el siguiente:
Código PHP (Copiar):
- Los campos de opciones: estos serán los campos verdaderamente importantes, los que almacenarán las opciones y podremos hacerlo mediante campos de texto, cuadros de texto o checkbox.
Código PHP (Copiar):
-
"desc" => "Enter a title to display for your welcome message.",
-
"id" => $shortname."_welcome_title",
-
"std" => "",
-
"type" => "text"),
-
-
"desc" => "Text to display as welcome message.",
-
"id" => $shortname."_welcome_message",
-
"type" => "textarea"),
-
-
"desc" => "Check this box if you would like to DISABLE the welcome message.",
-
"id" => $shortname."_welcome_disable",
-
"type" => "checkbox",
-
"std" => "false"),
Como vemos hay 5 campos:
name: contiene el nombre o el título.desc: descripción.id: será la variable mediante la que accederemos al valor en cuestión.type: será el tipo. Podrá ser text, textarea o checkbox.std: será el valor por defecto.
Dicho esto ya podremos personalizar los distintos campos que tendrá nuestra página, solo hay que tener en cuenta que el último array no deberá de tener la coma final, el resto sí.
Uso en el theme
Una vez que ya hemos configurado todas las opciones de nuestro theme solo nos queda poder usar las distintas variables de configuración en los distintos archivos de nuestro theme.
Uso en cualquier archivo
Para usar las distintas variables que almacenan en cualquier archivo, exepto en un archivo de estilo .css deberemos de incluir el siguiente código en cualquier archivo donde vallamos a usarlas el siguiente código al inicio:
-
<?
-
/* This code retrieves all our admin options. */
-
global $options;
-
foreach ($options as $value) {
-
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
-
}
-
?>
Luego donde queramos usar la variable simplemente tendremos que usar un echo con el nombre quedando así:
-
// Echo que imprimira la variable $wpc_welcome_title
-
-
//Version resumida que imprimira lo mismo
-
<?=$wpc_welcome_title?>
Uso de las variables en archivos CSS
Para usar las variables en archivos CSS el código a incluir es un poco distinto.
Primero deberemos de guardar la hoja de estilo como PHP y cambiar el código del header para que llame al archivo .php.
Después añadiremos justo al principio del archivo el siguiente código:
-
<?php
-
-
global $options;
-
-
foreach ($options as $value) {
-
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
-
?>
Luego para imprimir cualquier código lo haremos como anteriormente, usando un echo:
-
<?=$wpc_width?>
Y esto es todo, espero no haberme dejado nada en el tintero. Como siempre, para cualquier duda usad los comentarios y se intentará resolver lo antes posible. También, si os manejáis bien con el ingles podéis pasaros por la web del autor del código donde explica su uso.