[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-mostrar-facilmente-el-codigo-en-su-sitio-de-wordpress-3-metodos\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-mostrar-facilmente-el-codigo-en-su-sitio-de-wordpress-3-metodos\/","headline":"C\u00f3mo mostrar f\u00e1cilmente el c\u00f3digo en su sitio de WordPress (3 m\u00e9todos)","name":"C\u00f3mo mostrar f\u00e1cilmente el c\u00f3digo en su sitio de WordPress (3 m\u00e9todos)","description":"\u00bfQuieres mostrar c\u00f3digo en las publicaciones de tu blog de WordPress? Si intent\u00f3 agregar c\u00f3digo como texto normal, WordPress no lo mostrar\u00e1 correctamente. WordPress ejecuta ... Leer m\u00e1s<\/a>","datePublished":"2021-06-21","dateModified":"2021-06-21","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-mostrar-facilmente-el-codigo-en-su-sitio-de-WordPress.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-mostrar-facilmente-el-codigo-en-su-sitio-de-WordPress.png","height":340,"width":550},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-mostrar-facilmente-el-codigo-en-su-sitio-de-wordpress-3-metodos\/","about":["Tutoriales Wordpress"],"wordCount":971,"articleBody":"\u00bfQuieres mostrar c\u00f3digo en las publicaciones de tu blog de WordPress? Si intent\u00f3 agregar c\u00f3digo como texto normal, WordPress no lo mostrar\u00e1 correctamente. WordPress ejecuta su contenido a trav\u00e9s de varios filtros de limpieza cada vez que guarda una publicaci\u00f3n. Estos filtros est\u00e1n ah\u00ed para asegurarse de que alguien no inyecte c\u00f3digo a trav\u00e9s del editor de publicaciones para piratear su sitio web. En este art\u00edculo, le mostraremos las formas adecuadas de mostrar f\u00e1cilmente el c\u00f3digo en su sitio de WordPress. Te mostraremos diferentes m\u00e9todos, y podr\u00e1s elegir el que mejor se adapte a tus necesidades.M\u00e9todo 1. Mostrar c\u00f3digo usando el editor predeterminado en WordPressEste m\u00e9todo se recomienda para principiantes y usuarios que no necesitan mostrar c\u00f3digo con mucha frecuencia. Simplemente edite la publicaci\u00f3n del blog o la p\u00e1gina donde desea mostrar el c\u00f3digo. En la pantalla de edici\u00f3n de publicaciones, agregue un nuevo bloque de c\u00f3digo a su publicaci\u00f3n. Ahora puede ingresar el fragmento de c\u00f3digo en el \u00e1rea de texto del bloque. Despu\u00e9s de eso, puede guardar la publicaci\u00f3n de su blog y obtener una vista previa para ver el bloque de c\u00f3digo en acci\u00f3n. Dependiendo de su tema de WordPress, el bloque de c\u00f3digo puede verse diferente en su sitio web. M\u00e9todo 2. Mostrar c\u00f3digo en WordPress usando un complementoPara este m\u00e9todo, usaremos un complemento de WordPress para mostrar el c\u00f3digo en las publicaciones de su blog. Este m\u00e9todo se recomienda para usuarios que a menudo muestran c\u00f3digo en sus art\u00edculos. Le brinda las siguientes ventajas sobre el bloque de c\u00f3digo predeterminado: Le permite mostrar f\u00e1cilmente cualquier c\u00f3digo en cualquier lenguaje de programaci\u00f3n.Muestra el c\u00f3digo con resaltado de sintaxis y n\u00fameros de l\u00ednea.Sus usuarios pueden estudiar f\u00e1cilmente el c\u00f3digo y copiarloPrimero, debe instalar y activar el Sintaxis Resaltador evolucionado enchufar. Para obtener m\u00e1s detalles, consulte nuestra gu\u00eda paso a paso sobre c\u00f3mo instalar un complemento de WordPress.Tras la activaci\u00f3n, puede continuar y editar la publicaci\u00f3n del blog donde desea mostrar el c\u00f3digo. En la pantalla de edici\u00f3n de publicaciones, agregue el bloque ‘SyntaxHighlighter Code’ a su publicaci\u00f3n. Ahora ver\u00e1 un nuevo bloque de c\u00f3digo en el editor de publicaciones donde puede ingresar su c\u00f3digo. Despu\u00e9s de agregar el c\u00f3digo, debe seleccionar la configuraci\u00f3n del bloque en la columna de la derecha. Primero, debe seleccionar el idioma para su c\u00f3digo. Despu\u00e9s de eso, puede desactivar los n\u00fameros de l\u00ednea, proporcionar el n\u00famero de la primera l\u00ednea, resaltar cualquier l\u00ednea que desee y desactivar la funci\u00f3n para que se pueda hacer clic en los enlaces. Una vez que haya terminado, guarde su publicaci\u00f3n y haga clic en el bot\u00f3n de vista previa para verla en acci\u00f3n. El complemento viene con varios esquemas de color y temas. Para cambiar el tema de color, debe visitar Configuraci\u00f3n \u00bbSyntaxHighlighter p\u00e1gina. Desde la p\u00e1gina de configuraci\u00f3n, puede seleccionar un tema de color y cambiar la configuraci\u00f3n de SyntaxHighlighter. Puede guardar su configuraci\u00f3n para ver una vista previa del bloque de c\u00f3digo en la parte inferior de la p\u00e1gina. Uso de SyntaxHighlighter con Classic Editor Si todav\u00eda est\u00e1 utilizando el antiguo editor cl\u00e1sico de WordPress, aqu\u00ed es c\u00f3mo usar\u00eda el complemento SyntaxHighlighter para agregar c\u00f3digo a sus publicaciones de blog de WordPress. Simplemente coloque su c\u00f3digo entre corchetes con el nombre del idioma. Por ejemplo, si va a agregar c\u00f3digo PHP, lo agregar\u00e1 as\u00ed: [php]<?phpprivate function get_time_tags() {$time = get_the_time('d M, Y');return $time;}?>[\/php]De manera similar, si desea agregar un c\u00f3digo HTML, lo envolver\u00e1 alrededor del c\u00f3digo corto HTML de esta manera: [html]<a href=\"https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-easily-display-code-on-your-wordpress-site\/example.com\">A sample link<\/a>[\/html]M\u00e9todo 3. Mostrar c\u00f3digo en WordPress manualmente (sin complemento o bloque)Este m\u00e9todo es para usuarios avanzados porque requiere m\u00e1s trabajo y no siempre funciona como se esperaba. Es adecuado para usuarios que todav\u00eda usan el antiguo editor cl\u00e1sico y desean mostrar c\u00f3digo sin usar un complemento. Primero, debe pasar su c\u00f3digo a trav\u00e9s de un Codificador de entidades HTML herramienta. Cambiar\u00e1 el marcado de su c\u00f3digo a entidades HTML, lo que le permitir\u00e1 agregar el c\u00f3digo y omitir los filtros de limpieza de WordPress. Ahora copie y pegue su c\u00f3digo en el editor de texto y envu\u00e9lvalo <pre> y <code> etiquetas. Su c\u00f3digo se ver\u00eda as\u00ed: <pre><code>&lt;p&gt;&lt;a href=&quot;\/home.html&quot;&gt;This is a sample link&lt;\/a&gt;&lt;\/p&gt;<\/pre><\/code>Ahora puede guardar su publicaci\u00f3n y obtener una vista previa del c\u00f3digo en acci\u00f3n. Su navegador convertir\u00e1 las entidades HTML y los usuarios podr\u00e1n ver y copiar el c\u00f3digo correcto. Esperamos que este art\u00edculo le haya ayudado a aprender a mostrar c\u00f3digo f\u00e1cilmente en su sitio de WordPress. Es posible que tambi\u00e9n desee ver nuestra lista definitiva de los consejos, trucos y trucos de WordPress m\u00e1s buscados. Si le gust\u00f3 este art\u00edculo, suscr\u00edbase a nuestro Canal de Youtube para tutoriales en video de WordPress. Tambi\u00e9n puedes encontrarnos en Gorjeo y Facebook. 4.6 \/ 5 ( 377 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo mostrar f\u00e1cilmente el c\u00f3digo en su sitio de WordPress (3 m\u00e9todos)","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-mostrar-facilmente-el-codigo-en-su-sitio-de-wordpress-3-metodos\/#breadcrumbitem"}]}]