Cómo escribir código personalizado en tus publicaciones de WordPress

Hay muchas razones por las que querrías escribir o incluir código adicional en tus 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 un código personalizado, el proceso de escribir código puede ser estresante o 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 desee mostrar líneas de código o mejorar la apariencia de su sitio web)
  • Agregar código destinado a comportarse como un código, p. Anuncios con secuencias de comandos como Google Adsense Ads

En estas dos categorías, profundizaremos un poco en el código de programación como HTML, CSS, Javascript y tocaremos los anuncios y la belleza de

envase. Ahora, sin más fanfarria, pasemos a los negocios y escribamos un código.

Agregar código que parece código pero no se comporta como código

Si desea mostrar el código (tal vez usted es 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, de ahí todo su trabajo. La forma en que WordPress interpretará su código depende de si usa 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 será interpretado por el navegador web, algo que podría resultar en diseños desordenados y contenido de aspecto funky. Por ejemplo, 

en el editor visual se interpretará como texto ordinario y el resultado será solo
. sin embargo,
 en el editor HTML se interpretará como marcado HTML y el resultado será la creación de un contenedor.

Un ejercicio HTML

Realmente es un ejercicio inútil, pero puedes intentarlo para tener una idea más clara de lo que quiero decir. Solo abre tu Editor HTML, tipo

y guárdelo como borrador. Una vez que haya guardado su borrador, haga clic en “Vista previa de publicación” para ver su sitio web destrozado. No te preocupes, no es permanente y puedes tirar el borrador a la basura. Ahora de vuelta al negocio.

En general, puede usar el código de dos maneras. En primer lugar, puede usar el 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:



Escribir código en el tutorial de publicaciones de WordPress


...

Para lograr el efecto anterior, utilizamos la etiqueta de código escrita como ... nuestro código entra aquí . Sustituir flechas (<  >) Con corchetes ([]) según su sitio de WordPress y el editor de publicaciones que esté utilizando (visual o HTML). El código que desea mostrar debe ir entre la etiqueta de apertura,   y la etiqueta de cierre, . Por ejemplo, para usar código dentro de un párrafo:

Código en un párrafo

La etiqueta de código hace que el texto que no es HTML se vea como código, pero no le dice al navegador web que interprete el marcado HTML o lo quite de la publicación. Esto significa que un navegador aún puede codificar su marcado HTML, lo que dificulta su presentación Etiquetas HTML en tu código Sin embargo, puede superar este problema utilizando caracteres extendidos o entidades de caracteres para representar el < > caracteres, que engañarán a todos los navegadores. Por ejemplo…

Las etiquetas HTML se pueden interpretar como marcado HTML

… creará un nuevo contenedor (gracias a

) y un encabezado (

), lo que arruinará su página web. Pero si usa entidades de caracteres para reemplazar el < > flechas, evitará este comportamiento y generará su código como desee. El código anterior, por lo tanto, se verá así:

Utilice entidades de personaje en su lugar

Crear un bloque de código resaltado

Si me gustaría resaltar un bloque de código (o incluso texto) para obtener algo como;

Bloque de código

Empiezo poniendo el código (o texto) en un contenedor así:

Tienes que hacer esto en el editor HTML

Luego agrego estilo usando CSS directamente (como en la imagen de arriba) o mediante style.css archivo encontrado en la carpeta principal de su tema.

Dale estilo a tus etiquetas de código

La etiqueta de código usará el tamaño de fuente del y coloca 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 …

 código {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 detengas, aleja el estilo.

Agregar código que se comporta como código

Esta sección es especialmente útil si desea mostrar anuncios u otros scripts, p. Fragmentos de Javascript dentro de tus publicaciones. Si bien hay complementos, como Adsense rápido, que le ayudará a administrar los anuncios en sus publicaciones, podría estar interesado en 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 estará listo. 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 contenedor esté listo, puede diseñarlo como desee. Puedes moverlo usando tu style.css usando el posición propiedad. Si desea ejecutar un Anuncio de Google Adsense dentro de tus publicaciones, aún puedes usar Adsense rápido – el complemento – o cree un contenedor y coloque su código de anuncio de esta manera:


Nota 1: Los anuncios de Google están basados ​​en Javascript, y pueden ser interpretados por todos 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 desordenar 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, debe usar sus propios anuncios de Google �� Así es como aparece el anuncio de Google Adsense en mi blog:

Escribir código en WordPress

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 peinarlo usando style.css como lo considere conveniente. Y recuerde guardar todos los cambios. los

El contenedor es realmente útil, y cuando lo combina con CSS y una pizca de creatividad, puede lograr mucho con su sitio de WordPress. Puede ayudarlo a colocar cualquier código (o algo realmente) en cualquier parte de su sitio web.

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 delineamos al principio. Pero si no comprende ningún concepto en esta publicación, o si desea agregar sus sugerencias u opiniones, comparta sus ideas en la sección de comentarios a continuación.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map