Red de conocimiento informático - Material del sitio web - Cómo insertar código en una publicación de WordPress

Cómo insertar código en una publicación de WordPress

Ya sea que esté escribiendo un complemento o un truco para WordPress, o agregando fragmentos de código relacionados con WordPress u otro código de programación como HTML, CSS, PHP o javascript, cómo hacer que el código se inserte en el registro. ¿Tiene alguna forma? La falta de trabajo es un obstáculo común para los usuarios de blogs.

De forma predeterminada, WordPress convertirá automáticamente en , que se verá como después de la publicación. Si ve que se utiliza una etiqueta HTML en una publicación, la tratará como si fuera una etiqueta HTML, y su texto se verá extraño y su diseño estará desordenado.

Hay dos aspectos en el uso de código en páginas web. El uso de código dentro de un párrafo indica que se está analizando el código, seguido del código resaltado.

Código en párrafos

Hay dos etiquetas HTML que pueden convertir texto en un estilo de ancho fijo, a saber, y . Este último básicamente ya no se usa hoy en día. Se reemplaza por , más útil y gramaticalmente significativo, que puede distinguir el texto similar a un código de computadora del lenguaje general.

Este es un ejemplo de código utilizado dentro de un determinado párrafo

Para describir < code>index.php,

< código en WordPress >barra lateral .php y < code>header.php

archivos de plantilla. Este método es útil si desea utilizar etiquetas alrededor del texto para que parezcan código, pero ¿qué sucede si desea mostrar etiquetas como HTML?

En el archivo de plantilla < code>header.php, busque la sección < code>< div class="header"> para modificar < code>< h1>Barra de título. No hay forma de decirle a WordPress que separe la referencia HTML de la publicación usando la etiqueta . Ve la etiqueta , luego ve el div, por lo que responde creando un nuevo contenedor en la página. WordPress pensará que en realidad estás usando etiquetas HTML, y el uso accidental de etiquetas como h1 puede arruinar todo el diseño de la página web y la intención del diseño.

Si desea que WordPress reconozca esto como código en un párrafo, puede usar entidades de caracteres o caracteres extendidos para representar las flechas izquierda y derecha antes y después de él.

En el archivo de plantilla < code>header.php,

Busque < code>

Sección

para modificar la barra de título

.

De forma predeterminada, WordPress convertirá cualquier cosa que comience con /index.php?p=453 en un enlace. Puede usar caracteres extendidos en lugar de la barra diagonal derecha para que WordPress no "vea" el enlace.

...Usar en un blog

/index.php?p=453

Usar un enlace a un blog específico de WordPress....

/index.php?p=453

p>

Las siguientes son algunas de las entidades de caracteres HTML más utilizadas:

< = <

> = >

/ = /

] = ]

[ = [

" = "

' = '

A continuación se proporcionan recursos relevantes que le ayudarán a convertir etiquetas HTML en entidades de caracteres, por lo que no necesita preocuparse por memorizar estos códigos de caracteres.

Utilice la etiqueta PRE

Para permitir que el código se copie y pegue en otro código o archivos de plantilla, puede utilizar la etiqueta HTML < pre>.

La etiqueta < pre> indica al navegador que utilice una fuente de código de ancho fijo y copie completamente el contenido dentro de la etiqueta < pre>. Cada espacio, línea y código se copia por completo.

< h3>Título de la sección tres

Este es el comienzo de un

buena relación entre tú y yo....

Usar la etiqueta < pre> no se ve bonito, pero se puede lograr Objetivo. Más adelante se darán ejemplos de cómo resolver problemas de apariencia. Mostrará el código exactamente como está.

Aquí estamos hablando de la verdad, y esto también es cierto. Si su línea de código es muy larga, se extenderá fuera de la página porque no hay instrucciones que le indiquen que se ajuste. A continuación se ofrece un ejemplo:

< h3>Título de la sección tres

Este es el comienzo de un buena relación

entre tú y yo y creo que deberías leerlo porque es importante que

tengamos estos pequeños conversaciones

de vez en cuando para hacernos saber cómo nos sentimos....

Parece Es muy incómodo. Para evitar este fenómeno de código saltando fuera de la pantalla, es necesario segmentarlo. Pero no es tan fácil decidir dónde segmentar y colocar etiquetas de línea de segmento.

Si estás familiarizado con los lenguajes de programación, sabrás dónde dividir líneas sin estropear una línea de código. Pero si no sabes dónde romper las líneas, experimenta. Después de escribir el código, rompa las líneas y pruébelo. Para que el código funcione, necesita esta forma de salto de línea. De lo contrario, pruebe con otras posiciones de salto de línea.

Si sus líneas de código son muy largas, considere mostrar solo una pequeña porción del código y proporcionar un enlace al fragmento completo en texto en el sitio o en un archivo PHP. También puede usar un archivo temporal. visualización del código en línea.

Solución de problemas de código

Escribir código en blogs de WordPress puede ser un desafío, ya que anula el estilo predeterminado de WordPress. Si tiene problemas para escribir código en el registro, lo siguiente puede resultarle útil.

Comillas en el código

Un problema común al escribir código en un blog es que WordPress convierte las comillas rectas del código en comillas rizadas que aparecen en los programas de procesamiento de textos. El código utilizado para implementar la función no debe tener esas comillas, pero debe conservar las comillas rectas originales.

Puedes evitar esto usando la etiqueta

, o usar códigos de caracteres para representar comillas también puede resolver este problema:

< p class="red">

se puede escribir como

Pero si edita una página después de publicarla por primera vez, el editor de código HTML reemplazará todas las entidades con sus propios símbolos. Por lo tanto, si usa " para representar comillas, se convierten en " y se convertirán cuando guarde.

Personalizar el estilo de las etiquetas de código

De forma predeterminada, usar

 y  mostrará el texto como una fuente de estilo de ancho fijo y usará el tamaño de fuente del cuerpo. etiqueta.  Si desea utilizar diferentes tamaños de fuente, haga que las etiquetas aparezcan en diferentes colores o estilos.  

En la página de estilo style.css de la carpeta del tema de apariencia de WordPress, agregue estilos para estos dos tipos de etiquetas. Por ejemplo:

pre{border: sólido 1px azul;

tamaño de fuente: 1,3 em;

color: azul

margen: 10px;

relleno: 10px;

fondo: #FFFFB3}

código{font-size:1.2em; color: #008099}

Usar < code> se verá como el anterior, y usar pre se verá así:

pre{border: solid 1px blue

<; p> tamaño de fuente: 1,3 em;

color: azul;

margen: 10px;

relleno:

fondo; : #FFFFB3}

código{font-size:1.2em;

color: #008099}