Hay muchas razones por las que le gustaría escribir o incluir código adicional en sus publicaciones de WordPress. Es posible que deba mostrar publicidad, aplicar un estilo único a ciertas secciones de su sitio web o simplemente marcar algún texto o contenido para llamar la atención. Aún así, puede agregar código para lograr varios efectos visuales para ofrecer una mejor experiencia de usuario.
Todas estas y otras son razones válidas, pero no importa lo que esté buscando lograr con el código personalizado, el proceso de escribir código puede ser estresante o completamente desafiante. En este tutorial, cubriremos las siguientes áreas:
- Agregar código que parece código pero no se comporta como código (en caso de que esté buscando mostrar líneas de código o mejorar la apariencia de su sitio web)
- Agregar código que está destinado a comportarse como código, por ejemplo, anuncios con secuencias de comandos como Google Adsense Ads
Bajo estas dos categorías, profundizaremos un poco en código de programación como HTML, CSS, Javascript y tocaremos los anuncios y la belleza de la
Agregar código que se parece al código pero no se comporta como el código
Si desea mostrar un código (tal vez sea un diseñador o desarrollador web) que sus usuarios pueden copiar y pegar, es importante hacerlo bien porque incluso un solo salto de línea puede estropear el código y, por lo tanto, todo su trabajo. La forma en que WordPress interpretará su código depende de si utiliza el editor HTML o Visual Post. Ingresar su código directamente en el editor visual no tendrá el efecto que desea crear, ya que el editor visual considera que el código es texto normal, lo que significa que los navegadores web no interpretarán su código como “código”, sino como texto ordinario.
Por otro lado, el Editor de publicaciones HTML reconocerá cualquier marcado HTML o CSS que use, lo que significa que el navegador web los interpretará, algo que podría resultar en diseños desordenados y contenido de aspecto original. Por ejemplo,
Un ejercicio HTML
En realidad, es un ejercicio inútil, pero puedes intentarlo para tener una idea más clara de lo que quiero decir. Solo abre tu Editor de HTML, escribe
Generalmente, puede utilizar el código de dos formas. En primer lugar, puede usar código dentro de una línea (o párrafo) para aclarar un punto sobre su código. En segundo lugar, puede escribir, resaltar y poner su código en un bloque como este:
Writing Code in WordPress Posts Tutorial
...
Para lograr el efecto anterior, usamos la etiqueta de código escrita como …our code goes in here . Sustituir flechas (< >) con corchetes ( [ ] ) dependiendo de su sitio de WordPress y del editor de publicaciones que esté utilizando (visual o HTML). El código que desea mostrar debe ir entre la etiqueta de apertura, and the closing tag, . Por ejemplo, para usar código dentro de un párrafo:
La etiqueta de código hace que el texto que no es HTML se vea como un código, pero no le dice al navegador web que interprete el marcado HTML ni lo elimine de la publicación. Esto significa que un navegador aún puede codificar su marcado HTML, lo que dificulta mostrar Etiquetas HTML en su código. Sin embargo, puede superar este problema utilizando caracteres extendidos o entidades de caracteres para representar la < > personajes, que engañarán a todos los navegadores. Por ejemplo…
… creará un nuevo contenedor (gracias a
), lo que estropeará su página web. Pero si usa entidades de caracteres para reemplazar el < > flechas, evitará este comportamiento y generará su código como desee. Por lo tanto, el código anterior se verá así:
Crear un bloque de código resaltado
Si quisiera resaltar un bloque de código (o incluso texto) para obtener algo como;
Empiezo poniendo el código (o texto) en un contenedor así:
Luego agrego estilo usando CSS ya sea directamente (como en la imagen de arriba) o a través del style.css archivo que se encuentra en la carpeta principal de su tema.
Diseñe sus etiquetas de código
La etiqueta de código utilizará el tamaño de fuente del
y coloque el texto en una fuente monoespaciada por defecto. Sin embargo, puede cambiar todo eso para que su código se vea exactamente como lo desea. Todo lo que tienes que hacer es agregar … code{font-size:1.2em; color:#000; font-weight:normal;}
… o algo similar a tu style.css. Hay estilos ilimitados y todo depende de tus preferencias personales, así que no te reprimas: estilo.
Agregar código que se comporta como el código
Esta sección es especialmente útil si desea mostrar anuncios u otros scripts, por ejemplo, fragmentos de JavaScript dentro de sus publicaciones. Si bien existen complementos, como Quick Adsense, que lo ayudarán a administrar los anuncios en sus publicaciones, es posible que le interese instalar scripts independientes sobre los que tenga control total.
Si su anuncio es una imagen simple y un enlace, puede agregar el anuncio a su publicación a través de la utilidad de carga. Simplemente cargue la imagen e ingrese su enlace (y tal vez un título) y su trabajo está hecho. Sin embargo, este método es limitado, ya que solo puede alinear su anuncio a la izquierda, a la derecha o en el centro, como una imagen típica. Alternativamente, puede crear un contenedor dentro de su publicación usando el editor HTML.
Ejemplo:
Cree este contenedor exactamente donde desea su anuncio, lo que significa que debe tener la publicación lista antes de agregar el anuncio. Una vez que el recipiente esté listo, puedes diseñarlo como quieras. Puedes moverlo usando tu style.css usando el posición propiedad. Si desea ejecutar un Anuncio de Google Adsense dentro de sus publicaciones, aún puede usar Quick Adsense, el complemento, o crear un contenedor y colocar su código de anuncio de esta manera:
Nota 1: Los anuncios de Google se basan en Javascript y pueden ser interpretados por los principales navegadores web siempre que el usuario haya habilitado Javascript en sus máquinas.
Nota 2: Debe elegir las dimensiones de anuncios adecuadas para su sitio web para evitar estropear sus publicaciones y el sitio web.
Si desea agregar un anuncio permanente que aparecerá en todas sus publicaciones (publicaciones actuales y futuras) sin ningún trabajo adicional, deberá editar el Plantilla de publicación única (single.php). Coloqué un anuncio de 468 px por 60 px en la parte superior de todas mis publicaciones agregando el siguiente código al single.php inmediatamente despues < – – END post-entry-meta – ->.
Por supuesto, debes usar tus propios anuncios de Google 🙂 Así es como aparece el anuncio de Google Adsense en mi blog:
Encontrar single.php, ir a tu Panel de administración – >> Apariencia – >> Editor – >> single.php. Una vez que single.php esté abierto, use la barra de búsqueda (Ctrl + F) localizar < – – END post-entry-meta – ->.
Puede dejar el contenedor como está o darle estilo usando style.css como mejor le parezca. Y recuerde guardar todos los cambios. los
La caja de herramientas
Si desea obtener más información sobre cómo escribir código personalizado en sus publicaciones de WordPress, no dude en consultar los siguientes recursos:
Bueno, eso es todo. Hemos logrado cubrir las áreas que describimos al principio. Pero si no comprende algún concepto en esta publicación, o si desea agregar sus sugerencias o puntos de vista, ¡comparta sus pensamientos en la sección de comentarios a continuación!
