Mover el título de las páginas bajo la caberacera en Digital Pro

Muy buenas! Hoy veremos como mover lo títulos de las páginas bajo la cabecera en Digital Pro. Y con algo de estilo con CSS le daremos mucha mas importancia. Hace tan solo unos días subía un artículo sobre como crear una barra de utilidades en Digital pro. Y es que estos días ando trabajando más con este tema.

Ya sabéis si hay algún artículo que os gustaría que hiciese o algo de lo que no encontráis información podéis mandarme un mensaje desde luiscolome.com/proponer.

Funciones y Hooks

Ok, manos a la obra. Si no conoces el tema, o no estás familiarizado con los distintos hooks y funciones, te recomiendo que trabajes con algún plugin que te muestre estos hooks y las funciones que «cuelgan» de cada uno de ellos. Yo empecé trabajando con Genesis Visual Hook Guide, pero pronto se me quedó pequeño. Así que ahora trabajo con Simply Show Hooks. Más exhaustivo y da mucha más información.

Es con él que he visto donde estaban las funciones que tenia que «mover» para cambiar de sitio el título. Os dejo captura.

Teniendo en cuenta que mover el título no deja de ser, eliminar la función de un hook y añadirla a otro, simplemente he creado una función que haga eso, pero sólo en las páginas. Ni en los artículos ni ningún otro contenido personalizado.

Pero he ido un paso más allá para que me permitiese darle estilo sin entrar en conflicto con ningún otro título del tema. Ahora lo explico. Primero os muestro la función para que veáis el código.

Resumiendo. Lo que he hecho es crear un contenedor (dos en realidad, anidados), con mis propias clases para luego al dar estilo que no afecte a otras clases que pueda haber con el mismo nombre.

Con un remove_action he eliminado las funciones del título y su contenedor, del hook original. Si sólo hiciese eso, el título simplemente desaparecería. No se mostraría. Lo siguiente con add_action ha sido colocar las funciones del título y su nuevo contenedor en el hook elegido.

El estilo

Lo siguiente es darle estilo. Esta parte es mi preferida. Será porque el CSS me encanta cada día más, jeje. No he hecho nada complicado. Un poco de margen interior y exterior, color de fondo y centrar el título. Y por supuesto un poco de adaptabilidad. Nada complejo, sólo cuidar de los márgenes en pantallas pequeñas. Ahí va el código.