Share
Creando tu propio tema para WordPress es una excelente manera de darle un toque original a su blog u otro sitio web impulsado por WordPress. Pero incluso el tema más atractivo no es tan agradable si tienes que ponerte debajo del capó y editar el código HTML o PHP del tema cada vez que sea necesario cambiar algunos aspectos. Especialmente, cuando no eres tú, sino un cliente que paga utilizando tu tema. Por suerte, creando un página de configuración para su tema en WordPress no es muy difícil, y después de leer este tutorial, podrá crear uno en ningún momento!
Todo comienza a partir de la necesidad: para crear una página de configuración clara y útil, debe averiguar las cosas que deben cambiarse y omitir todo lo demás. Cada nueva configuración que agregue a los menús de administración agrega complejidad a la interfaz de usuario y puede hacer que el tema sea más difícil de usar. Es por eso que es mejor tener cuidado y seleccionar las opciones que se van a cambiar con frecuencia y dejar de lado las personalizaciones que se pueden hacer fácilmente cambiando un archivo dentro del tema.
Otra pregunta a tener en cuenta es "¿Quién va a cambiar estas configuraciones?" Si el usuario está familiarizado con PHP y WordPress, puede ser razonable esperar que esté de acuerdo con incrustar su código de Google Analytics en el código, pero no debe solicitarlo a un diseñador gráfico, por no mencionar a un escritor que no lo hace. Ni siquiera necesito saber nada sobre HTML y CSS.
Las ideas comunes para definir cosas en la configuración del tema incluyen:
Una vez que haya recopilado la lista de características del tema que le gustaría controlar a través de una página de configuración, está casi listo para comenzar la implementación. Antes de continuar y crear su página de configuración, puede ahorrar tiempo asegurándose de que no haya una función de WordPress disponible para la personalización que tiene en mente. Los widgets, los menús personalizados, los fondos personalizados y las imágenes de encabezado son herramientas útiles para personalizar el tema con mucho menos trabajo del requerido para crear sus propios ajustes. Son, sin embargo, temas para un tutorial diferente..
Para este tutorial, imaginé una página principal de temas que consiste en una cuadrícula con un número variable de publicaciones destacadas que el administrador puede seleccionar, editar y reordenar usando una página de configuración personalizada..
En el editor, los elementos de la primera página se presentarán como una lista de elementos a los que se pueden agregar nuevos utilizando JavaScript y jQuery..
Me gusta poder obtener una vista previa de la página de administración en el administrador de WordPress cuando diseño el HTML, por lo que generalmente comienzo vinculando una página de configuración con WordPress, y solo luego paso al diseño del contenido de la página. Por eso, nuestro próximo paso es crear una página de configuración de marcador de posición y conectarla a WordPress.
La creación de una página de configuración comienza creando una función que configura el menú y lo enlaza a la acción de WordPress admin_menu. Esto le dice a WordPress que llame a su función cuando sea el momento de crear los menús para que todo se haga en el momento adecuado. Agrega este código a tu tema funciones.php expediente:
Accentsconagua
function setup_theme_admin_menus () // Escribiremos el contenido de la función muy pronto. // Esto le dice a WordPress que llame a la función llamada "setup_theme_admin_menus" // cuando es el momento de crear las páginas del menú. add_action ("admin_menu", "setup_theme_admin_menus"); Ahora pondremos el código para crear las páginas de configuración dentro de la función que acabamos de crear..
Al crear su página de configuración, tiene la opción de agregar la página como un submenú a uno de los grupos de configuración existentes o crear su propio menú de nivel superior.
La adición de un submenú se realiza con la función. add_submenu_page:
$ parent_slug es un identificador único para la página del menú superior a la que se agrega este submenú como elemento secundario.$ page_title Es el título de la página a añadir.$ menu_title es el título que se muestra en el menú (a menudo una versión más corta de $ page_title $ capacidad es la capacidad mínima requerida de un usuario para tener acceso a este menú.$ menu_slug es un identificador único para el menú que se está creando$ función es el nombre de una función que se llama para manejar (y renderizar) esta página de menúSi elige agregar la página del menú como un submenú a uno de los grupos de WordPress, puede usar los siguientes valores como $ parent_slug parámetro:
index.php edit.php subir.php link-manager.php edit.php? post_type = página editar-comentarios.php temas.php plugins.php usuarios.php herramientas.php opciones-general.php El grupo Apariencia parece un buen candidato para colocar nuestra página de configuración. Intentemos eso, y creamos nuestra primera página de configuración. Aquí hay una versión actualizada de nuestra función de configuración de menú:
function setup_theme_admin_menus () add_submenu_page ('themes.php', 'Front Page Elements', 'Front Page', 'manage_options', 'front-page-elements', 'theme_front_page_settings'); Todavía necesitamos crear la función. theme_front_page_settings para que esto funcione Aquí está en su forma más simple:
function theme_front_page_settings () echo "Hello, world!";
Y así es como se ve en acción:
También debemos verificar que el usuario tenga los derechos necesarios para editar la página de configuración. Para hacerlo, agregue el siguiente código al principio de la función de la página de configuración:
// Compruebe que el usuario tiene permiso para actualizar las opciones si (! Current_user_can ('manage_options')) wp_die ('No tiene permisos suficientes para acceder a esta página.'); Ahora, si un usuario que no tiene permiso para administrar opciones llega a la página de configuración, no verá más que el mensaje "No tiene permisos suficientes para acceder a esta página".
Si su tema necesita múltiples páginas de configuración, puede ser confuso para el usuario buscarlas dispersas por toda la estructura del menú. En ese caso, crear su propio grupo de configuraciones facilita al usuario del tema encontrar todas las páginas del menú para el tema.
Para agregar su propio grupo de configuraciones, debe crear una página de menú de nivel superior y vincular las páginas del submenú. Aquí hay una nueva versión de nuestra función de configuración de menú. los add_menu_page La función utilizada para crear el menú de nivel superior es similar a add_submenu_page excepto que no toma el $ parent_slug parámetro.
función setup_theme_admin_menus () add_menu_page ('Configuraciones de tema', 'Ejemplo de tema', 'Opciones de administración', 'tut_theme_settings', 'Tema_settings_page'); add_submenu_page ('tut_theme_settings', 'Front Page Elements', 'Front Page', 'manage_options', 'front-page-elements', 'theme_front_page_settings'); // También necesitamos agregar la función de controlador para la función de menú de nivel superior theme_settings_page () echo "Página de configuración"; Si prueba el código y actualiza el administrador de WordPress, verá que su nuevo grupo de menú aparece en la parte inferior de la lista de menús:
Pero algo no se ve muy bien todavía. Al hacer clic en el elemento del menú superior no se accede al menú "Portada", sino a una página del menú llamada "Tema de ejemplo". Esto no es consistente con la forma en que funcionan los otros menús de WordPress, así que hagamos una cosa más: cambiando el $ menu_slug atributo en el add_submenu_page al mismo valor que en el menú de nivel superior, podemos vincular los dos menús para que al seleccionar el menú superior se seleccione el menú de la página principal:
función setup_theme_admin_menus () add_menu_page ('Configuraciones de tema', 'Ejemplo de tema', 'Opciones de administración', 'tut_theme_settings', 'Tema_settings_page'); add_submenu_page ('tut_theme_settings', 'Front Page Elements', 'Front Page', 'manage_options', 'tut_theme_settings', 'theme_front_page_settings'); function theme_settings_page () 
Se ve mejor. Si aún desea mejorar el aspecto de su grupo de menús, hay dos campos opcionales en el add_menu_page Función que encontrarás útil. Solo agregue los valores después del nombre de la función en la llamada al método:
$ icon_url Especifica la URL de un icono para el menú de nivel superior..$ posición Especifica la posición de su grupo de menús en la lista de menús. Cuanto mayor sea el valor, menor será la posición en el menú.Ahora que hemos creado la página de configuración, y se ve muy bien en el menú lateral, es hora de comenzar a agregar contenido. Entonces, volvamos a la lista de configuraciones que teníamos en mente y redactamos una página para editarlas..
En este tutorial, necesitamos un campo para definir cuántos elementos se deben enumerar en una fila y una lista para definir los elementos reales. Para comenzar desde lo más fácil, creemos un campo de texto para el número de elementos en una fila. Edite la función de la página de configuración:
función theme_front_page_settings () ?>Cuando vuelva a cargar la página de configuración, verá aparecer el primer campo de configuración:
Para que la página de configuración se adapte perfectamente a la experiencia de WordPress y para darle un toque profesional a su complemento, es una buena práctica usar las clases y estilos CSS que WordPress usa en sus propias páginas de configuración. Una buena manera de aprender los trucos es seguir adelante y analizar el código fuente de WordPress.
Lo más importante es envolver su página de configuración con un
divcon la clase"envolver". Dentro de esodivelemento, puede utilizar muchos estilos predefinidos como encabezados, botones y campos de formulario. Empecemos por el estilo del título de nuestra página de configuración:
h2 encabezado de la página (puede utilizar las etiquetas de encabezado de h2 a h6 para crear encabezados con diferentes tamaños.)screen_icon función. La función puede tomar uno de los siguientes parámetros: índice, editar, subir, administrador de enlaces, páginas, comentarios, temas, plugins, usuarios, herramientas o opciones generales.)entrada Elemento dentro de un formulario y una tabla con la clase. tabla de formas.función theme_front_page_settings () ?>Elementos de la portada
A continuación, es hora de empezar a agregar los elementos..
Para hacer esto, usaremos jQuery ya que hace las cosas mucho más fáciles que escribir JavaScript desde cero, y viene incluido con WordPress. Si ha usado jQuery anteriormente, solo debe tener en cuenta una cosa:
PSLa notación que normalmente usaría con jQuery no funciona en WordPress. Debe escribir la palabra completa.,jQueryen lugar.Primero, crearemos el elemento para editar la configuración de un bloque de página principal para que sirva como plantilla para los elementos que agrega el usuario. Agregue este código justo entre la etiqueta de la tabla de cierre y la etiqueta de formulario de cierre justo después de esta.
Ahora, se ve así:
Ahora que tenemos nuestra plantilla, es hora de ocultarla y crear el JavaScript para usarla para crear nuevas filas de publicaciones destacadas en la página de configuración. Establecer el estilo para el li elemento arriba para pantalla: ninguna;
Luego, crearemos una lista para contener los elementos de la página principal a medida que se agregan, y un enlace en el que el usuario hará clic para agregar los nuevos elementos. Repito todo el HTML para que pueda ver claramente a dónde van los cambios:
Elementos de la portada
retirar
En un tema de la vida real, es una buena práctica colocar su código JavaScript en un archivo separado, pero para que este tutorial sea un poco más fácil de seguir, ahora estoy agregando el JavaScript en la misma función con el HTML anterior, justo antes del envolver div:
El código JavaScript anterior crea una función que se llama cuando el usuario hace clic en el enlace con id. añadir-aparece-post. Esta función clona el elemento de la lista de plantillas que creamos anteriormente y actualiza sus campos para que tengan identificadores y nombres únicos. De esta forma, todos se enviarán correctamente con el formulario cuando el usuario haga clic en enviar. La variable elementCounter contiene la siguiente id para agregar. También se guarda en un campo oculto para que cuando se envíe el formulario, sepamos cuántos elementos de la página de inicio podemos esperar..
Si hace clic en el enlace "Agregar publicación destacada" un par de veces, verá que se agregan nuevos elementos a la lista:
Pero cuando haces clic en el enlace de eliminar, notarás que no pasa nada. Agreguemos una función para eliminar elementos de la lista:
function removeElement (element) jQuery (element) .remove ();
También necesitamos llamar a la función. Agregue el siguiente código justo antes de incrementar elementCounter.
var removeLink = jQuery ("a", elementRow) .click (function () removeElement (elementRow); devolver false;); Antes de pasar a guardar el formulario, hay una cosa más que hacer. Usaremos el plugin jQuery de ui.sortable para que los elementos de la primera página puedan ordenarse arrastrándolos a la página. Para habilitar la funcionalidad de clasificación, deberemos incluir el archivo JavaScript adecuado (que también viene incluido con WordPress). Esto se puede hacer agregando la siguiente línea de código al final de funciones.php:
if (is_admin ()) wp_enqueue_script ('jquery-ui-sortable'); Luego, agregaremos el siguiente JavaScript justo antes (o después) del jQuery ("# add-feature-post"). click función definida anteriormente.
jQuery ("# Featured-posts-list"). sortable (stop: function (evento, ui) var i = 0; jQuery ("li", this) .each (function () setElementId (this, i) ; i ++;); elementCounter = i; jQuery ("input [name = element-max-id]"). val (elementCounter);); Este fragmento de código hace que la lista se pueda ordenar y agrega un evento al que se llama cada vez que el usuario termina de ordenar. El controlador de eventos actualiza todos los identificadores en los elementos para que la nueva orden se conserve también al guardar el formulario (esto se aclarará una vez que implementemos el guardado). Cuando escribí este controlador de parada, noté que el código para configurar el id para el contenido de la plantilla se duplicó en dos lugares, así que lo re-configuré en su propia función, que coloqué justo antes de la línea jQuery (documento) .ready ():
función setElementId (element, id) var newId = "front-page-element-" + id; jQuery (elemento) .attr ("id", newId); var inputField = jQuery ("seleccionar", elemento); inputField.attr ("name", "element-page-id-" + id); var labelField = jQuery ("label", elemento); labelField.attr ("for", "element-page-id-" + id); Al agregar nuevos elementos, ordenarlos y eliminarlos, es hora de pasar a guardar los datos. Pero antes de eso, agregue un botón de envío justo antes de la etiqueta de cierre del formulario.
La página de configuración se ve bien, pero falta algo: todavía no hace nada. Es hora de guardar algunos datos. WordPress proporciona un sistema fácil para guardar las configuraciones de temas y complementos como pares de valores clave en la base de datos utilizando dos funciones: get_option y update_option. Los datos almacenados con las funciones pueden ser tan simples como un valor numérico o tan complejos como una matriz anidada varias veces.
El manejo del formulario se realiza en la misma función que representa el formulario. Para saber si un formulario fue enviado o no, agregamos un campo oculto, ajustes de actualización al formulario y luego verifique si ese campo fue enviado o no en la función de manejo.
if (isset ($ _ POST ["update_settings"])) // Guarda
El campo oculto que va dentro del formulario se ve así:
Empecemos por guardar el ajuste más fácil., num_elementos. Escaparemos el atributo para asegurarnos de que el usuario no esté enviando contenido malicioso en las etiquetas HTML y luego lo guardaremos en el almacenamiento de configuración de WordPress. Cuando usas update_option, no tenemos que preocuparnos de si la configuración ya se ha guardado o no.
$ num_elements = esc_attr ($ _ POST ["num_elements"]); update_option ("theme_name_num_elements", $ num_elements); Antes de pasar a guardar la lista, agreguemos el valor actual de num_elementos a la forma de configuración para que el usuario siempre vea en qué valor ha ingresado antes de decidir el siguiente valor. Esto también nos ayudará a probar que el valor se guardó realmente.
Y para los casos en los que aún no hayamos guardado nada, tendremos que cargar el valor actual de las opciones, así que agreguemos este fragmento de código para que se ejecute cuando no se haya enviado ningún formulario..
$ num_elements = get_option ("theme_name_num_elements"); Cuando se guarda un formulario, es importante notificar al usuario para que no se quede preguntándose si sucedió algo o no. Por lo tanto, vamos a hacer un simple aviso diciendo "Se guardó la configuración." justo después de la update_option:
?>Se guardó la configuración
Entonces, vamos a guardar los elementos de la primera página. El valor de id más alto en los elementos de la página frontal se pasa como
element-max-id, para que podamos tomar ese valor y recorrer los elementos hasta ese ID, guardando sus datos en una matriz en el orden correcto:$ front_page_elements = array (); $ max_id = esc_attr ($ _ POST ["element-max-id"]); para ($ i = 0; $ i < $max_id; $i ++) $field_name = "element-page-id-" . $i; if (isset($_POST[$field_name])) $front_page_elements[] = esc_attr($_POST[$field_name]); update_option("theme_name_front_page_elements", $front_page_elements);Esto guarda los datos, pero aún debemos presentar los valores en la página de configuración. Entonces, hagamos lo mismo que con el
num_elementoscampo y cargar las opciones predeterminadas al principio de la función:$ front_page_elements = get_option ("theme_name_front_page_elements");Y luego, renderiza los elementos existentes al hacer el formulario:
También necesitamos establecer el valor inicial para el elementCounter variable utilizada en JavaScript estableciendo el valor inicial del campo oculto en PHP y leyéndolo al inicializar la variable JavaScript:
Y la parte de JavaScript:
var elementCounter = jQuery ("input [name = element-max-id]"). val (); Guardar y mostrar los valores de configuración dentro del área de administración es genial, pero lo que realmente cuenta es cómo los usa para personalizar su tema, por lo que ahora, hemos llegado al punto en el que es hora de tomar nuestra configuración y hacer algo genial con ellos..
De aquí en adelante, los cambios van a index.php en lugar de funciones.php. Primero, leeremos las opciones a variables:
Vamos a recorrer el $ elementos lista, agrupándolos en filas con $ num_elements bloques en cada.
Y luego, utilizando los datos guardados para cada elemento, completaremos la parte de representación de elementos anterior:
">post_title;?>
Con un par de elementos, se ve así:
Todavía bastante aburrido. Las publicaciones no tienen imágenes en miniatura y no hay estilo para ellas. Para que se vean mejor, primero agreguemos soporte para publicar imágenes en miniatura. Esto se hace conectando una nueva función que configura las características del tema para que se llamen justo después de que se haya cargado el tema
function setup_theme_features () if (function_exists ('add_theme_support')) add_theme_support ('post-thumbnails'); if (function_exists ("add_image_size")) add_image_size ('tutorial-thumb-size', 200, 200, true); add_action ('after_setup_theme', 'setup_theme_features'); La función, setup_theme_features enciende las miniaturas de la entrada usando la función de WordPress add_theme_support para que WordPress agregue esta funcionalidad a la página de guardado posterior. En la página de la publicación, ahora podemos agregar una imagen como miniatura haciendo clic en "Usar como imagen destacada" en la página de carga de la imagen después de subir la foto.
La función también define un nuevo tipo de tamaño de imagen., tutorial-thumb-size que se utiliza al obtener la miniatura de la publicación en el código de representación.
Después de seleccionar la imagen mostrada, guarde los cambios y vuelva a cargar la página principal. Parece más interesante ya:
Finalmente, añadiremos algunos estilos a style.css, y ahí vamos, el tema tiene una pantalla configurable de publicaciones destacadas:
.front-page-element-row overflow: auto; .front-page-element float: left; margen: 10px 10px 10px 10px; relleno: 0px; ancho: 200px; altura: 200px; .thumbnail-image ancho: 200px; altura: 200px; fondo: #eee; posición: relativa; .thumbnail-image .title position: absolute; abajo: 20px; bloqueo de pantalla; fondo: # 000; color: #fff; relleno: 10px; Familia tipográfica: Arial; tamaño de letra: 12 puntos; texto-decoración: ninguno;
Ahora, hemos creado una página de configuración para un tema personalizado. El tema está lejos de ser completo, pero espero que esta introducción le ayude a comenzar a agregar configuraciones y elementos personalizables a su próximo tema de WordPress.
