¿Cómo editar en WordPress fácil y de forma segura?

Conocer a editar en WordPress, es una de las cosas básicas que se debe conocer, y más si trabajas como un desarrollador o escritor. Puede que los conocimientos sobre las raíces informáticas o códigos fuentes, sea complicado, pero aquí te explicaremos de manera sencilla y de forma práctica, con la finalidad de que tus páginas queden tan bien como deseas. ¡Lee y descubre lo fascinante editar WordPress!

editar wordpress

Cómo puede editar en WordPress con códigos

El uso de WordPress para desarrollar páginas webs ha tomado bastante interés, por su sencillez y lo práctico que es para las personas que no son programadores, pero puede llegar el punto donde quieres modificar o darles toques personales y tener más control sobre la página.

El objetivo de este artículo es darles a conocer como modificar el código fuente, para que puedes cambiar y agregar nuevos ítems según lo desees. Si eres de los que les apasiona romper paradigmas y quieres que tu blog se vea diferente, puedes hacerlo editando su código de WordPress. Para personalizar diferentes tareas.

  • En la última actualización lanzada por WordPress trajo consigo el nuevo editor de bloques, este divide todo el contenido del blog sea un párrafo, una imagen, un video, una tabla etc. En trozos muy pequeños separados, abriéndonos la posibilidad de diseñar páginas y entradas a nuestro gusto.
  • El editor clásico es un plugin oficial de esta página, incluye varios filtros que permiten que otros plugins controlen los ajustes y la elección de editor por publicación y por tipo de contenido, favorece al editar el código HTML para publicaciones o páginas individuales. Cabe destacar que este plugin oculta todas las funciones que dispone el nuevo editor de bloques.
  • Si desea editar el código core del tema de WordPress, hay que ser precavidos y saber exactamente qué código se debe modificar, ya que dentro de los archivos core se encuentran tanto los archivos de la apariencia y el funcionamiento de la plataforma.
  • Considera usar un plugin para administrar las fracciones de código que agregue al archivo <head> o functions.php de su tema.
  • Para agregar código CSS personalizado, WordPress presenta dos opciones, la clásica usar el área personalizador de CSS o podrías usar un plugin como (CSS simple).

Cómo editar HTML de WordPress para páginas individuales

La manera más sencilla de editar el código HTML en WordPress, es accediendo al código fuente, bien sea foros individuales, paginas o algún otro tipo de publicaciones. Esto se puede hacer usando algunos de los dos editores de texto que nos brinda la misma página; El nuevo editor de bloque de WordPress (Gutenberg) o también el clásico y más viejo editor de TinyMCE.

Gutenberg es un editor de texto que cambió completamente la forma para crear páginas y entradas, mejoró la simple caja donde se insertan imágenes, links, texto, entre otros. Al estilo simple y común, todo esto lo modificó y lo hizo más interesante e incluso muy ilustrador.

Cómo Editar HTML de WordPress en el Editor de Bloque

Hay algunas formas con las que puede trabajar con HTML en Gutenberg. Esta Herramienta nos da la opción de usar códigos propios para insertar barras, dar otro tipo de diseño etc. Para esto basta con dirigirnos al bloque dedicado de HTML personalizado y pegar el código en este espacio. Este símbolo no debe ser insertado en la fuente de la publicación, este método es más complicado y podría generar algunas alteraciones en su contenido.

Editar Bloques Individuales

Para hacer ediciones individuales o hacer modificaciones en áreas precisas, como agregar un tag de nofollow a un enlace en el blog, se necesitará el acceso solo a ese bloque. Nos da dos maneras de hacerlo; la primera es dando clic en las opciones para un bloque individual y seleccionar la opción de Editar como HTML

Esto va a permitir editar el código HTML solo en ese sector; La segunda opción nos facilita editar el HTML para toda la página, accediendo al Editor de Código desde el menú desplegable en la parte principal de Herramientas y Opciones. O, también puede utilizar el atajo de teclado para cambiar entre edición de código y edición visual – Ctrl + Shift + Alt + M.

Al usar este método hay que tener presente que se debe trabajar conforme la estructura del blog, estas anotaciones; – p.e. <!– wp:paragraph –> Es lo que crea los bloques y se debe trabajar dentro de estos parámetros.




Desactivar el editor Guntenberg y activar el método antiguo

El primer paso es  instalar y activar el plugin Classic Editor. Para obtenerlo, diríjase a la sección Plugins del backoffice del WordPress y marca la opción de Añadir Nuevo. Estando ya en esta página, buscamos el plugin que antes mencionado haciendo uso de la barra de búsqueda que se sitúa en la parte superior derecha de la página.

Siguiendo los pasos al pie de la letra, este plugin deberá aparecer como el primer resultado de la búsqueda. Si es así instálalo y actívalo para poder utilizarlo.(en caso de que no aparezca, verifica estar siguiendo correctamente el procedimiento). Una vez activado, nos habilitará dos opciones:

  1. Usar de manera permanente el editor clásico (con lo cual se eliminará el Gutenberg).
  2. Cambiar entre el Gutenberg y clásico mediante enlaces.

Usar siempre el editor clásico

Está opción viene por defecto, al activar el plugin, el nuevo editor Gutenberg se desactiva. Es decir, a la momento de usar editar en wordpress offline, cualquier publicación o cualquier página sólo se podrá usar el  método antiguo, haciéndolo del mismo a como  se hacía antes de la versión 5.0 de WordPress, lo que significa para muchos tedioso y poco convencional.

Cambiar entre el Gutenberg y el clásico

Esta opción es la más recomendable, ¿Por qué? Porque de esta manera tendrás acceso a ambos editores y solo se posterga indiferentemente el uso de cualquiera de estos. No te puedes quedar anclado en el pasado. La web cada día requiere de más innovación, de cambios y mejoras. Además las posteriores versiones de WordPress también utilizarán Gutenberg, esto hace mayor presión y tener que acceder a una nueva modalidad como está.

Se considera que se deba tener  un periodo de adaptación y de capacitación, para hacer el cambio de un editor y otro, pero mientras más rápido se obtenga el conocimiento, mejores oportunidades. Este mundo inmerso en la modernización exige constantemente la actualización de ideas y conocimientos.

Cómo Editar WordPress en el Editor Clásico (TinyMCE)

Este editor es más simple a la hora de personalizar, en la actualidad muy pocos hacen uso del mismo, esta herramienta permite editar el código HTML para toda la publicación, usando la pestaña de texto:

Cómo Editar el Código Fuente en su Tema de WordPress

El tema de modificar o particularizar parece bastante fácil, pero en realidad es asunto grande que podría volverse tedioso si se modifica algo fuera de nuestro alcance de resolver, en este caso WordPress para prevenir estos accidentes ha hecho mejoras en su plataforma.

Sin embargo al querer editar el código fuente de su sitio, es algo que siempre le abrirá las puertas a estos problemas, así que lo mejor es estar siempre seguro y tener el conocimiento necesario antes de entrar en acción y ocasionar alguna eventualidad como romper nuestra página.

Utilice un Tema Child (niño) para Cualquier Edición de Código Directa

Esto es ideal para los usuarios que desean ampliar las funciones de tu theme sin perder las modificaciones con cada actualización. Un child theme o tema hijo es un tema que hereda las características básicas del tema padre, permitiendo mejorar su estructura, modificarla y ampliar sus habilidades.

Sin un Tema Child, cualquier cambio en el código que haga desaparece cuando el texto principal (tema Padre) se actualiza. Todos sus archivos son renovados y todas las modificaciones se borran, en pocas palabras vuelve a su estructura original.  Un tema hijo no se actualiza, no se sobrescribe, se puede realizar cualquier cantidad de cambios y nunca se perderán.

Considere Utilizar un Plugin en lugar de editar el código de un Tema Child

Los plugin son una de las funciones que hacen de esta plataforma aún más interesante, permite trabajar de una manera flexible y poderosa, ayudando a mejorar el aspecto del sitio web, dando características únicas cubriendo las necesidades que el usuario necesita.Si  su interés es modificar el funcionamiento de su tema, es probable que usted necesite es editar directamente el código fuente del tema child.

En cambio si usted quiere editar el código en WordPress, porque busca algún otro resultado, como agregar un script de rastreo a la sección <head> de su sitio, o agregar snippets (Códigos reusables) a el post, la mejor opción para esto es utilizar un plugin en lugar de hacerlos manual.

Podemos ver como el Encabezado, Pie de página e inyecciones de la publicación hacen que sea sencillo introducir snippets cuando se requiere. Y considerando que estos códigos reusables son todos son separados en la interfaz del plugin, también es más sencillo administrarlos en el futuro.

Si lo que se quiere es agregar nuevos códigos en el archivo de functions.php, existe un plugin gratuito llamado Code Snippets es una gran opción para esta tarea. En fin, si desea editar el código en WordPress para agregar snippets al tema;

  • Sección <head>
  • Archivo php

Para esto debe considerar usar un plugin en lugar de hacer retoques en el código fuente de forma manual, procure no cambiar ni modificar manualmente los archivos del sistema. Los plugin hacen simple el proceso de administrar los snippets y dan validez a que el esfuerzo y trabajo que le dedique a su blog, no se pierda al actualizarlo.

Utilice el Editor de Código dentro del Dashboard de WordPress

Si eres de los que les gusta editar el código directamente, como sugerencia realizar un respaldo general de su sitio web, antes de hacer alguna modificación, por muy mínima que sea.Una vez realizados el backup, ahora sí se podrá proceder a iniciar editor de tema de dashboard, para esto se dirige a la sesión Apariencia -> Editor de Tema. Al abrirlo muestra una advertencia a la acotación mostrada anteriormente.

Luego de esto ya se tiene acceso a la barra lateral derecha, donde se podrá usar las herramientas y  el mismo editor de código. Se puede decir que también existe programa para editar en WordPress, entre los mas conocidos, destaca Elementor, te ayuda a tener control sobre lo que editas.

Utilice SFTP para Editar Código en WordPress

Este complemento nos facilita la tarea de desarrollo web con los ficheros ubicados en un servidor remoto, si se usa esta extensión al mismo tiempo de desarrollar un código, esta va sincronizando automáticamente el contenido al servidor, de esta manera se pueden ver los cambios que se van creando en el sitio web. Es una alternativa al editor de código dentro del dashboard. Hay dos beneficios al usarlo;

  • Se puede usar el editor de código que desee.
  • Si llegase a modificar algo o eliminar algún código de manera accidental, ese error podría arreglarlo de inmediato, ya que podría visualizar la falla al instante. Además puedes crear un copia de seguridad para ellos se copian los datos del espacio web localmente en el ordenador.
  • En desemejanza,  si se edita el sitio usando dashboard de WordPress,  existe  la posibilidad que de manera errónea pueda alterar o romper algo que le su acceso al dashboard de WordPress, siendo más específico es necesario conectarse a través de SFTP para darle solución al problema (aunque la probabilidad de fallo en muy mínima por las nuevas actualizaciones).

Lo primero que se debe hacer es conocer un poco más del tema, empezando por, ¿cómo conectar un blog usando FTP?, quizás suena un poco complejo, pero es bastante sencillo.

Una vez que ya se tenga mejor conocimiento en el tema, se puede acceder al folder del tema –…/wp-content/themes/child-theme-name.  Se selecciona el archivo a editar y dar clic derecho sobre este. En su mayoría de los programas FTP, permiten editar el archivo, y  de manera automática se descarga el nuevo archivo una vez registrados los cambios.

Se recomienda descargar una imagen original del post, antes de gestionar algún cambio, de esta forma podría realizar alguna corrección si algo no le sale igual a lo planeado.

Cómo Agregar CSS Personalizado a WordPress

El método para agregar códigos basados en CSS personalizado a WordPress es bastante sencillo, a diferencia de editar el código HTML o PHP de WordPress, para esto no se necesita del editor de código dentro del dashboard o los métodos de SFTP.

En este caso entra en juego el Personalizador de WordPress. Hace proceso bastante cómodo, y brinda el poder tener una vista previa de los cambios que se irán registrando en tiempo real. Si se quiere aplicar este método basta con dirigirse a  Apariencia -> Personalizar en el apartado de dashboard de WordPress.

https://www.youtube.com/watch?v=J5b3dKfuJzQ

Es acá cuando se abre el editor de código y se puede realizar la modificación o agregar el CSS. Conforme se vaya agregando el texto irá actualizándose mostrando los cambios realizados. WordPress nos provee otro método mediante el uso de plugin. Usando el plugin simple CSS de Tom Usborne. Simplifica la opción similar en el Personalizador de WordPress, habilita un bloque donde permite agregar CSS personalizado a la pagina, contenidos individuales etc.

Hay quienes quieren agregar muchas personalizaciones en CSS y abarcan un montón de líneas, para ello se puede crear una página de estilo CSS y utilizar la herramienta wp_enqueue_scripts para encolar paquete a WordPress.

Hay dos pasos que se dan cuando se encola un guion o un estilo. Primero lo registras, le dices a WordPress que está ahí, y luego lo encolas, lo que eventualmente lo lleva al encabezado o justo antes de la etiqueta de cierre del cuerpo. De esta manera se le estará declarando a WordPress que quieres hacer uso de otro código, le das la ubicación del archivo, lo verifica y lo aplica en dado caso cumpla con los protocolos preestablecidos.

Si es de tu interés aplicar este método, te aconsejo estudiar el tema antes de intentar subir muchos códigos, tanto para prevenir daños, o si lo quieres hacer por los métodos anteriores nombrados que llevarán más tiempo y trabajo.

Importancia del diseño web

 El diseño es la parte más creativa del proyecto, la que permite darle un sentido y orientación al blogs, para ello enfócate en la visión, hay que tener cuidado acá, no se trata de sobrecargar la página, pero tampoco muy poco estilo. Los complementos conferirá al sitio web un aspecto externo atractivo, capaz atraer el interés y de llamar la atención del público objetivo.

Todo el diseño va a depender del contenido que se esté trabajando, además hay que tener en cuenta la selección de la información recogida y clasificación, tomando en cuenta a qué tipo de público va dirigido, estudiar los requisitos y preferencias del espectador.

La accesibilidad, la usabilidad, y el equilibrio armónico entre estética y funcionalidad son aspectos que condicionan el diseño. Los recursos que se deben emplear en esta etapa son muy variados,  incluir fotografías, ilustraciones, videos, animaciones, barras de búsqueda entre otras funciones.

Además, los recursos tipográficos y la paleta de colores también adquieren un gran protagonismo a la hora de personalizar el sitio web y diferenciarlo del de los competidores, ya que contribuyen a hacerlo más impactante.

Para la aplicación de estos estilos fueron tratados los temas antes nombrados, con el objetivo de facilitarte el aprendizaje y lograr en ti un mejor manejo de la estructura de WordPress. ¿Qué esperas?, Comienza a innovar creando tu propia página web.

Para complementar la información leída, te dejamos algunos enlaces que pueden ser de tu interés:

Deja un comentario