Wordpress:Temas de dipucordoba.es: Difference between revisions

From
Jump to navigation Jump to search
(Created page with "== Pasos para la migración de un tema == === Antes de empezar === # Avisar al usuario responsable del tema # Establecer los colores del tema según lo indicado en la [https:/...")
 
No edit summary
 
(48 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Pasos para la migración de un tema ==
== Pasos para la migración de un tema ==
=== Antes de empezar ===
=== Antes de empezar ===
# Avisar al usuario responsable del tema
# Avisar al usuario responsable del tema.
# Establecer los colores del tema según lo indicado en la [https://docs.google.com/spreadsheets/d/1cvr_UB0aaWaulNivwgcO3m0C0uqY0PMwhiYgoczNX2U/edit?usp=sharing hoja de cálculo de Temas]
# Dar de alta en DNS interno la URL del tema y activar acceso con contraseña.
# Mostrar a Jaime el esqueleto con la gama de colores para su aprobación
 
=== Análisis de estructura y datos ===
# Consultar estructura del tema original y widgets e3 utilizados, y su posible traslación a módulos DIVI en [https://docs.google.com/spreadsheets/d/1cvr_UB0aaWaulNivwgcO3m0C0uqY0PMwhiYgoczNX2U/edit?usp=sharing hoja de cálculo de Temas] (hoja 2)
# Valorar posibles modificaciones del árbol de páginas (para hacerlo más horizontal)
# Estudiar migración de datos desde e3 a WP y posibles adaptaciones del plugin "e3 to WP" (coordinarse con Antonia Herruzo)
 
=== Maquetación y diseño ===
=== Maquetación y diseño ===
# Mostrar resultado al usuario responsable del tema
# Crear subdominio y clonar tema genérico.
#* Si ya existe el subdominio del nuevo tema, Eliminarlo.
#* Clonar desde ''tema0.dipucordoba.es'' a ''nuevotema.dipucordoba.es''
#* Activar plugin NS Cloner y realizar la clonación. (Es recomendable activar log)
#* Desactivar plugin NS Cloner
# (Comprobar, ya están de alta en el tema 0). Dar de alta a los usuarios de Service Desk en el nuevo tema
# Establecer colores
#* Consultar los colores del tema según lo indicado en la [https://docs.google.com/spreadsheets/d/1cvr_UB0aaWaulNivwgcO3m0C0uqY0PMwhiYgoczNX2U/edit?usp=sharing hoja de cálculo de Temas].
#** Si el tema no tiene los colores A y B definidos (valor Hex.), debe tener un color genérico. En ese caso Definir color A y B exacto.
#** Entrar en ''Divi'' > ''Opciones del Tema'' > ''CSS Personalizado''
#** Sustituir todos los atributos color cuyo valor es ''black'' por el cód. Hex. del ''color A'' del tema.
#** Sustituir todos los atributos color cuyo valor es ''red'' por el cód. Hex. del ''color B'' del tema.
#*** Si el color resulta demasiado claro para el "hover" de los enlaces, consultar a Miguel para un eventual nuevo color "C".
#** Sustituir líneas de subrayado de cabecera y pie por el ''color A'' del tema. '''¡Atención a las cabeceras personalizadas que se mantengan!''' También hay que cambiarles el color del subrayado.
#** Durante el proceso de maquetado se configurarán distintos elementos (en módulos Divi, views Toolset, etc.) con los colores del tema. Esto se irá llevando a cabo en el momento preciso.
# Icono del tema y fondo de la sección de cabecera '''(y de las cabeceras personalizadas que se mantengan)'''
#*  En la zona izquierda de la cabecera aparece un icono genérico de tema. Éste debe coincidir con el que aparece en la [https://dipucordoba.es/temas página de temas de dipucordoba.es] (cada tema está identificado con un icono determinado)
#** Sustituir el icono genérico por el específico (Debe encontrarse en unidad de red ''...\almacen\CMS\WordPress\dipucordoba\Temas\{NombreTEMA}\ico-{NombreTEMA}-tema.png''
#* Sustituir la imagen de fondo de la sección  de cabecera .
#** Entrar en ''Divi'' > ''Generador de temas''
#** Dentro de las plantillas, entrar en ''Cabecera'' >''Sección de título - Tema'  > ''Contenido'> ''Fondo''  y  sustituir la imagen
# Menús
#* Existen varios menús en cada tema:
#** Menu-Principal: Clon del menú principal de dipucordoba.es
#** Dipu-Pie: Clon del menú ubicado en el pie de dipucordoba.es
#** Dipu-Legales: Clon del menú de pág. legales (aviso legal, etc.) ubicado en dipucordoba.es
#** Tema: Menú secundario del tema. Se ubica en la cabecera y es opcional, dependiendo de las necesidades de cada tema en concreto.
#* En caso de que deba existir el menú Tema, configurarlo mediante el procedimiento básico de WP (menú ''Apariencia'' > ''Menús'')
# Creación de páginas
#* ''Tema 0'' conserva la estructura del tema ''europedirect'' y varios elementos Divi y ToolSet. Éstos se deberán utilizar (adaptándolos a cada tema nuevo).
#* En caso de necesitar elementos que no estén presentes en el tema, buscar la solución en elementos de dipucordoba e importarlos al nuevo tema.
#** en ''CSS personalizado'' se encuentran varios trozos de código comentados. Éstos hacen referencia a elementos de dipucordoba.es. En caso de importar módulos de dicha página, consultar ''CSS personalizado'' para "descomentar" y reconfigurar sus estilos.
* Mostrar resultado al usuario responsable del tema para su aprobación
 
=== Importación de contenidos ===
=== Importación de contenidos ===
# Pasos previos a la importación
## Antes de empezar la importación de contenidos deberemos actualizarnos la base de datos e3_contenidos que está en el dominio dipucordoba.es. Se puede realizar de la siguiente forma:
##* En un terminal, con la siguiente orden
##*: <pre>> mysqldump -h mysqlserver-production -u e3 -p(clavee3) e3 > $_directoriolocal/e3_contenidos.sql</pre>
##* Si nos diera un error del anterior comando en la tabla information_schema.column_statistics (debido a versiones diferentes de mysql), y además obviamos la tabla historical_bops, el anterior comando lo ejecutamos de la siguiente forma:
##*: <pre>> mysqldump --column-statistics=0 --ignore-table=e3.historical_bops --ssl-mode=DISABLED  -h mysqlserver-production -u e3 -p(clavee3) e3 > /home/amhh01/Documentos/e3.sql </pre>
##* Copiar ese sql a uploads de plesk
##*: <pre>> scp -i Descargas/LightsailDefaultKey-eu-west-1.pem Descargas/e3_contenidos.sql ubuntu@<ip-plesk>:/uploads</pre>
##* Conectarse a lightsail, la instancia de plesk que queramos
##*: <pre>
##*:: > cd /uploads
##*:: > sudo cp e3_contenidos.sql /var/www/vhosts/dipucordoba.es/ (o al dominio que queramos)</pre>
## También debemos copiar los archivos images y attachments al directorio uploads, del año o años que necesitemos.
##* Primero, nos conectamos desde un terminal al servidor deploy:
##*: <pre>> ssh deploy@deploy</pre>
##* Vamos al directorio donde están en este servidor las imágenes de e3 o del gestor en cuestion:
##*: <pre>> cd /data1/uploads/yii/e3/production/uploads/images</pre>
##*: o
##*: <pre>> cd /data1/uploads/yii/e3/production/uploads/attachments</pre>
##* Copiamos esas imágenes o attachments al directorio uploads de la máquina plesk en cuestión
##*: <pre>> scp -r -i ../LightsailDefaultKey-eu-west-1.pem y(año) ubuntu@<ip-plesk>:/uploads/images/</pre>
##*: o
##*: <pre>> scp -r -i ../LightsailDefaultKey-eu-west-1.pem y(año) ubuntu@<ip-plesk>:/uploads/attachments/</pre>
## Añadir el directorio donde se guardan imágenes y anexos a la configuración de PHP para que no dé errores de permisos.
##* Acceder a la '''Configuración de PHP''' del dominio.
##* En la sección '''Configuración común''', opción '''open_basedir''' añadir al final <code> :/uploads </code>  quedará algo como <code>{WEBSPACEROOT}{/}{:}{TMP}{/}:/uploads</code>
##* '''Aceptar'''.
##*: **Nota: también resulta conveniente en la '''Configuración de seguridad y rendimiento''' modificar los valores de los parámetros '''memory_limit''', '''max_execution_time''' y '''max_input_time''' para evitar errores en la importación de contenidos, sobre todo si son muchos o con muchas imágenes. Se han probado valores 256M, 1200 y 1200, respectivamente y en los dos últimos casos han resultado insuficientes, siendo necesario repetir el proceso de importación porque se para.
# Uso del plugin E3 to WP para la importación de contenidos
#: El plugin aparece en el menú como E3 To Wordpress
#: Para la importación de cualquier tema, accedemos al escritorio del subdominio en cuestión y accedemos al plugin. Se van a explicar las pestañas ''Importación de contenidos'' y ''Personalización de temas'', ya que las otras se han utilizado para la importación de contenidos de área en la matriz Dipucordoba
#:* [[Uso del plugin e3 to wordpress#Importación de contenidos estándar|Importación de contenidos estándar]]
#:* [[Uso del plugin e3 to wordpress#Personalización de temas|Personalización de temas]]
=== Puesta en producción ===
* Eliminar los tipos de contenidos que no se usan (Boletines, Campañas, ...). Para ello, en la administración WordPress del Tema, acceder a Toolset > Tipos de entradas y eliminar todos aquellos tipos de contenidos que no se usen.
* Preparar la lista de redirecciones a incluir en el fichero <code>.htaccess</code> de www.dipucordoba.es, para ello:
** Comprobar en el tema de origen todos aquellos enlaces que tengan que redirigirse a la nueva web (si hay más aparte del propio https://www.dipucordoba.es/tema).
** Editar el fichero <code>/home2/versiones/yii/d4/production/shared/web/.htaccess</code> y añadir las reglas donde proceda (utilizar las existentes como guía).
* Desactivar en e3 los roles asociados al tema
* Incluir el ID Analytics (como seguramente no exista, crearlo en la cuenta de analytics de Diputación). '''Para el caso de las empresas públicas''', con el tema Astra, es necesario:
** Acceder a la sección de apariencia> personalizar
** Acceder a la sección de Maquetador de cabeceras, en esta seccion hay que pulsar en la columna central, lo que provocara que se abra un menu desplegable en el cual debemos elegir la opción de HTML
[[File:Desplegable.png|thumb|center]]
** Dentro el HTML se debe introducir el codigo script
** Finalmente hay que desactivar la visibilidad en todos los dispositivos para que no sea visible
[[File:Visibilidad.png|thumb|center]]
* Mantener una reunión formativa con el usuario y apoyar con la documentación hasta que se haga convocatoria para el curso
* Actualizar la hoja de [https://docs.google.com/spreadsheets/d/1smMtZnnbIuvjaURUzXQooscQizWe4c6N3lWFBOxV2vU/edit#gid=0 webs]
* Modificar la url de página a la que redirige en la correspondiente página del gestor de contenidos de e3 de Dipucordoba.
** Por ejemplo, en el tema Juventud. Abrimos la página Juventud en el gestor de contenidos de e3, y en la url de Página a la que redirige ponemos: https://juventud.dipucordoba.es
=== Revisión final ===
* ¿Funcionan correctamente las redirecciones?
* ¿Se ha añadido la redirección correspondiente a la página del tema en e3?
* ¿Se han eliminado los tipos de contenidos que no se usan (Boletines, Campaña, etc.)?

Latest revision as of 09:40, 25 July 2023

Pasos para la migración de un tema

Antes de empezar

  1. Avisar al usuario responsable del tema.
  2. Dar de alta en DNS interno la URL del tema y activar acceso con contraseña.

Análisis de estructura y datos

  1. Consultar estructura del tema original y widgets e3 utilizados, y su posible traslación a módulos DIVI en hoja de cálculo de Temas (hoja 2)
  2. Valorar posibles modificaciones del árbol de páginas (para hacerlo más horizontal)
  3. Estudiar migración de datos desde e3 a WP y posibles adaptaciones del plugin "e3 to WP" (coordinarse con Antonia Herruzo)

Maquetación y diseño

  1. Crear subdominio y clonar tema genérico.
    • Si ya existe el subdominio del nuevo tema, Eliminarlo.
    • Clonar desde tema0.dipucordoba.es a nuevotema.dipucordoba.es
    • Activar plugin NS Cloner y realizar la clonación. (Es recomendable activar log)
    • Desactivar plugin NS Cloner
  2. (Comprobar, ya están de alta en el tema 0). Dar de alta a los usuarios de Service Desk en el nuevo tema
  3. Establecer colores
    • Consultar los colores del tema según lo indicado en la hoja de cálculo de Temas.
      • Si el tema no tiene los colores A y B definidos (valor Hex.), debe tener un color genérico. En ese caso Definir color A y B exacto.
      • Entrar en Divi > Opciones del Tema > CSS Personalizado
      • Sustituir todos los atributos color cuyo valor es black por el cód. Hex. del color A del tema.
      • Sustituir todos los atributos color cuyo valor es red por el cód. Hex. del color B del tema.
        • Si el color resulta demasiado claro para el "hover" de los enlaces, consultar a Miguel para un eventual nuevo color "C".
      • Sustituir líneas de subrayado de cabecera y pie por el color A del tema. ¡Atención a las cabeceras personalizadas que se mantengan! También hay que cambiarles el color del subrayado.
      • Durante el proceso de maquetado se configurarán distintos elementos (en módulos Divi, views Toolset, etc.) con los colores del tema. Esto se irá llevando a cabo en el momento preciso.
  4. Icono del tema y fondo de la sección de cabecera (y de las cabeceras personalizadas que se mantengan)
    • En la zona izquierda de la cabecera aparece un icono genérico de tema. Éste debe coincidir con el que aparece en la página de temas de dipucordoba.es (cada tema está identificado con un icono determinado)
      • Sustituir el icono genérico por el específico (Debe encontrarse en unidad de red ...\almacen\CMS\WordPress\dipucordoba\Temas\{NombreTEMA}\ico-{NombreTEMA}-tema.png
    • Sustituir la imagen de fondo de la sección de cabecera .
      • Entrar en Divi > Generador de temas
      • Dentro de las plantillas, entrar en Cabecera >Sección de título - Tema' > Contenido'> Fondo y sustituir la imagen
  5. Menús
    • Existen varios menús en cada tema:
      • Menu-Principal: Clon del menú principal de dipucordoba.es
      • Dipu-Pie: Clon del menú ubicado en el pie de dipucordoba.es
      • Dipu-Legales: Clon del menú de pág. legales (aviso legal, etc.) ubicado en dipucordoba.es
      • Tema: Menú secundario del tema. Se ubica en la cabecera y es opcional, dependiendo de las necesidades de cada tema en concreto.
    • En caso de que deba existir el menú Tema, configurarlo mediante el procedimiento básico de WP (menú Apariencia > Menús)
  6. Creación de páginas
    • Tema 0 conserva la estructura del tema europedirect y varios elementos Divi y ToolSet. Éstos se deberán utilizar (adaptándolos a cada tema nuevo).
    • En caso de necesitar elementos que no estén presentes en el tema, buscar la solución en elementos de dipucordoba e importarlos al nuevo tema.
      • en CSS personalizado se encuentran varios trozos de código comentados. Éstos hacen referencia a elementos de dipucordoba.es. En caso de importar módulos de dicha página, consultar CSS personalizado para "descomentar" y reconfigurar sus estilos.
  • Mostrar resultado al usuario responsable del tema para su aprobación

Importación de contenidos

  1. Pasos previos a la importación
    1. Antes de empezar la importación de contenidos deberemos actualizarnos la base de datos e3_contenidos que está en el dominio dipucordoba.es. Se puede realizar de la siguiente forma:
      • En un terminal, con la siguiente orden
        > mysqldump -h mysqlserver-production -u e3 -p(clavee3) e3 > $_directoriolocal/e3_contenidos.sql
      • Si nos diera un error del anterior comando en la tabla information_schema.column_statistics (debido a versiones diferentes de mysql), y además obviamos la tabla historical_bops, el anterior comando lo ejecutamos de la siguiente forma:
        > mysqldump --column-statistics=0 --ignore-table=e3.historical_bops --ssl-mode=DISABLED  -h mysqlserver-production -u e3 -p(clavee3) e3 > /home/amhh01/Documentos/e3.sql 
      • Copiar ese sql a uploads de plesk
        > scp -i Descargas/LightsailDefaultKey-eu-west-1.pem Descargas/e3_contenidos.sql ubuntu@<ip-plesk>:/uploads
      • Conectarse a lightsail, la instancia de plesk que queramos
        > cd /uploads
        > sudo cp e3_contenidos.sql /var/www/vhosts/dipucordoba.es/ (o al dominio que queramos)
    1. También debemos copiar los archivos images y attachments al directorio uploads, del año o años que necesitemos.
      • Primero, nos conectamos desde un terminal al servidor deploy:
        > ssh deploy@deploy
      • Vamos al directorio donde están en este servidor las imágenes de e3 o del gestor en cuestion:
        > cd /data1/uploads/yii/e3/production/uploads/images
        o
        > cd /data1/uploads/yii/e3/production/uploads/attachments
      • Copiamos esas imágenes o attachments al directorio uploads de la máquina plesk en cuestión
        > scp -r -i ../LightsailDefaultKey-eu-west-1.pem y(año) ubuntu@<ip-plesk>:/uploads/images/
        o
        > scp -r -i ../LightsailDefaultKey-eu-west-1.pem y(año) ubuntu@<ip-plesk>:/uploads/attachments/
    2. Añadir el directorio donde se guardan imágenes y anexos a la configuración de PHP para que no dé errores de permisos.
      • Acceder a la Configuración de PHP del dominio.
      • En la sección Configuración común, opción open_basedir añadir al final  :/uploads quedará algo como {WEBSPACEROOT}{/}{:}{TMP}{/}:/uploads
      • Aceptar.
        **Nota: también resulta conveniente en la Configuración de seguridad y rendimiento modificar los valores de los parámetros memory_limit, max_execution_time y max_input_time para evitar errores en la importación de contenidos, sobre todo si son muchos o con muchas imágenes. Se han probado valores 256M, 1200 y 1200, respectivamente y en los dos últimos casos han resultado insuficientes, siendo necesario repetir el proceso de importación porque se para.
  1. Uso del plugin E3 to WP para la importación de contenidos
    El plugin aparece en el menú como E3 To Wordpress
    Para la importación de cualquier tema, accedemos al escritorio del subdominio en cuestión y accedemos al plugin. Se van a explicar las pestañas Importación de contenidos y Personalización de temas, ya que las otras se han utilizado para la importación de contenidos de área en la matriz Dipucordoba

Puesta en producción

  • Eliminar los tipos de contenidos que no se usan (Boletines, Campañas, ...). Para ello, en la administración WordPress del Tema, acceder a Toolset > Tipos de entradas y eliminar todos aquellos tipos de contenidos que no se usen.
  • Preparar la lista de redirecciones a incluir en el fichero .htaccess de www.dipucordoba.es, para ello:
    • Comprobar en el tema de origen todos aquellos enlaces que tengan que redirigirse a la nueva web (si hay más aparte del propio https://www.dipucordoba.es/tema).
    • Editar el fichero /home2/versiones/yii/d4/production/shared/web/.htaccess y añadir las reglas donde proceda (utilizar las existentes como guía).
  • Desactivar en e3 los roles asociados al tema
  • Incluir el ID Analytics (como seguramente no exista, crearlo en la cuenta de analytics de Diputación). Para el caso de las empresas públicas, con el tema Astra, es necesario:
    • Acceder a la sección de apariencia> personalizar
    • Acceder a la sección de Maquetador de cabeceras, en esta seccion hay que pulsar en la columna central, lo que provocara que se abra un menu desplegable en el cual debemos elegir la opción de HTML
Desplegable.png
    • Dentro el HTML se debe introducir el codigo script
    • Finalmente hay que desactivar la visibilidad en todos los dispositivos para que no sea visible
Visibilidad.png
  • Mantener una reunión formativa con el usuario y apoyar con la documentación hasta que se haga convocatoria para el curso
  • Actualizar la hoja de webs
  • Modificar la url de página a la que redirige en la correspondiente página del gestor de contenidos de e3 de Dipucordoba.
    • Por ejemplo, en el tema Juventud. Abrimos la página Juventud en el gestor de contenidos de e3, y en la url de Página a la que redirige ponemos: https://juventud.dipucordoba.es

Revisión final

  • ¿Funcionan correctamente las redirecciones?
  • ¿Se ha añadido la redirección correspondiente a la página del tema en e3?
  • ¿Se han eliminado los tipos de contenidos que no se usan (Boletines, Campaña, etc.)?