Tutorial WYSIWYG de WordPress¿Estás usando WordPress?’ funciones de formato al máximo?

Espero que ya conozca los conceptos básicos sobre cómo dar formato a las publicaciones de su blog para que sean más legibles.. (Si recién está comenzando, es posible que desee comprobar 4 Consejos de formato de WordPress para hacer que sus publicaciones sean más legibles para obtener una descripción general de los conceptos básicos.)

Pero muchos blogueros – incluso los experimentados – no se dan cuenta de cuántas funciones de formato están integradas en WordPress.

Comprender el editor WYSIWYG de WordPress

Ya sea que escriba sus borradores en el editor de WordPress o en otro lugar, es importante estar familiarizado con la barra de herramientas WYSIWYG de WordPress y saber qué hacen todos esos botones.

WYSIWYG (pronunciado "wizzy-wig") significa "Lo que ves es lo que obtienes", y describe cualquier interfaz en la que pueda ver cómo se verá realmente su texto al aplicarle varios tipos de formato. Microsoft Word, Google Docs y WordPress son todos editores WYSIWYG.

Siempre que cree una nueva publicación o página en WordPress, debería ver el editor WYSIWYG. La barra de herramientas (los botones en la parte superior) Se ve como esto:

(Si no ve estos botones, asegúrese de que está utilizando el "Visual” en lugar del "Texto” versión del editor. Puede alternar entre los dos usando las pestañas en el lado derecho del cuadro donde escribe su publicación.)

Si ha escrito y formateado su publicación en otro editor WYSIWYG y copió el texto en WordPress, Es posible que se haya conservado parte del formato. Pero algunas opciones de formato, como blockquotes y reglas horizontales, solo se puede aplicar en WordPress.

(No se preocupe si no tiene idea de lo que "blockquotes” y "reglas horizontales” son. Sabrás todo sobre ellos, y como usar, ellos al final de esta publicación!)

Incluso si algunos de los botones parecen confusos en este momento, todos son sencillos de usar. Tomaremos la barra de herramientas una fila a la vez.

La fila superior de la barra de herramientas: Las opciones de formato más comunes

Los botones están divididos en dos filas.. La fila superior contiene las opciones que probablemente utilizará con más frecuencia..

Aquí están:

Los revisaremos uno por uno:

#1: "Párrafo” Desplegable

Equivalente de etiqueta HTML: <h1>, <h2>, <h3>, etc.. y <pre>.

Este menú desplegable le permite formatear su texto usando estilos de encabezado:

Bóveda 1 se usa para el título de tu publicación, y, por lo tanto, debe evitarse para los subtítulos dentro de su publicación.

La mayoría de los blogueros usan Heading 2 por sus principales subpartidas y encabezados 3 para cualquier subpartida anidada debajo de esos. (En esta publicación, por ejemplo, el subtítulo La fila superior de botones: Las opciones de formato más comunes son el encabezado 2, y el subtítulo #1: "Párrafo desplegable" es el título 3.)

El "Preformateado” La opción se puede utilizar si incluye secciones de código en su publicación.. mostrará el texto exactamente como está escrito usando una fuente monoespaciada.

#2: Texto en negrita

Equivalente de etiqueta HTML: <fuerte>

El botón que parece una B probablemente le resulte familiar en Microsoft Word y otros programas. Hace que tu texto esté en negrita así.

Para usarlo, tu también puedes:

Haga clic en la "B” botón, escribe el texto que quieras en negrita, luego haga clic en "B” de nuevo para volver al texto normal.
Escribe tu texto como de costumbre, luego resalte la parte que desee en negrita y haga clic en "B".

Úselo para: Enfatizando una oración clave, o crear un subtítulo en el que no desee utilizar un estilo de título.

#3: Texto en cursiva

Equivalente de etiqueta HTML: <en>

El botón que parece una I probablemente también sea muy familiar. Hace que tu texto esté en cursiva así.

Úselo para: Énfasis en una palabra en particular, o para una oración o dos de texto explicativo (por ejemplo. una nota al comienzo de su publicación que dice: Esta es la primera de una serie de cuatro partes).

#4: Lista desordenada (Puntos de viñeta)

Equivalente de etiqueta HTML: <los> para la lista, <en el> para cada elemento de la lista

El botón con tres puntos y líneas puede parecerse un poco al código Morse, pero en realidad se usa para crear una lista con viñetas (también conocida como "lista desordenada") Me gusta esto:

Artículo uno
Artículo dos
Tema tres

Úselo para: Una lista en la que el orden o la cantidad de artículos no importa en particular. Si cada elemento de su lista tiene más de un párrafo, probablemente querrás formatear tu lista de manera diferente (por ejemplo. usando subtítulos).

#5: Lista ordenada (Números)

Equivalente de etiqueta HTML: <ol> para la lista, <en el> para cada elemento de la lista

El segundo botón de lista es para una lista numerada (también conocido como "ordenado” lista) Me gusta esto:

Artículo uno
Artículo dos
Tema tres

Úselo para: Una lista donde importa el número o el orden de los artículos (por ejemplo. estás dando instrucciones paso a paso o escribiendo una lista de los diez mejores).

Para obtener más ayuda con las listas, mira mi publicación Cómo utilizar las listas de forma eficaz en las publicaciones de su blog.

#6: Blockquote

Equivalente de etiqueta HTML: <blockquote>

Blockquote (o cotización en bloque) el formato se utiliza para aplicar estilo al texto entre comillas (normalmente) tiene un margen izquierdo más ancho que el texto estándar. Según el tema de tu blog, el texto de la cita en bloque también puede estar en una fuente diferente y tener comillas al lado.

Así es como se ven blockquotes en el blog de ProBlogger.

Úselo para: Cualquier cita de alguien que no sea usted que tenga más de unas pocas palabras. Las citas muy breves se pueden colocar entre comillas en una oración..

#7: Alinear a la izquierda / centro / derecha

Equivalentes de etiquetas HTML: <pag>, <p estilo =”texto alineado: centrar;”>, <p estilo =”texto alineado: Correcto;”>

Por defecto, tu texto estará alineado a la izquierda (al ras con el margen izquierdo). Pero también puede alinear su texto para que esté centrado o alineado a la derecha.

Este texto está centrado.

Este texto está alineado a la derecha.

Úselo para: Crear una página de ventas u oferta especial, donde podría tener sentido centrar su texto. Algunos blogueros incluso usan texto centrado para poemas u otros tipos de contenido ligeramente inusuales..

#8: Vincular / desvincular

Equivalente de etiqueta HTML: <a href>

Este botón le permite convertir el texto en un enlace en el que los lectores pueden hacer clic para visitar una publicación o página diferente.. Simplemente escribe el texto (por ejemplo. el título de una publicación), luego resáltelo y haga clic en el botón de enlace. Verás esto:

A continuación, puede pegar la URL. (dirección web) de la página / publicación que desea o, si está en tu propio blog, puede buscar la página / publicación por título.

Tu enlace se mostrará así:

¿Cuál es la mejor solución de alojamiento de blogs??

Úselo para: Enlaces internos a sus propias publicaciones (bueno para SEO y anima a los lectores a quedarse más tiempo en tu blog), y enlaces externos a publicaciones u otros recursos de otras personas (bueno para demostrar su conocimiento / experiencia dentro de su campo, y para construir relaciones).

#9: Leer más etiqueta

Equivalente de etiqueta de WordPress: <!–más–>

Algunos temas de blogs muestran varias publicaciones en la página principal o en la página de índice.. A "leer más” la etiqueta divide la publicación en dos partes: la primera parte aparecerá en el índice, y el resto solo se mostrará una vez que el lector haga clic en "leer más” (o hace clic en el título de la publicación).

Otros temas están diseñados para mostrar solo un extracto de la publicación. (autogenerado o hecho a mano), por lo que no necesitará "leer más” etiqueta. Puede ver esto en acción en nuestro propio “Blog” página.

Úselo para: Separar publicaciones después de la introducción, o si desea mostrar parte de cada publicación en lugar de publicaciones completas en su página de inicio / página de índice de blog.

#10: Alternar barra de herramientas

Equivalente de etiqueta de WordPress: n / A

El "Alternar barra de herramientas” le permite mostrar / ocultar la segunda fila de iconos en su barra de herramientas. (Antes se llamaba "Mostrar / Ocultar fregadero de cocina", que puede reconocer si ha estado escribiendo en un blog durante mucho tiempo.)

Úselo para: Ver la segunda fila de botones de la barra de herramientas. O escondiéndolos si los encuentra distraídos o solo tiene una pantalla pequeña para trabajar.

La fila inferior de la barra de herramientas: Opciones de formato menos comunes

Si bien es posible que no utilice estos botones con mucha frecuencia, es útil saber qué hacen en caso de que los necesite.

Otra vez, los tomaremos uno a la vez comenzando por la izquierda.

#1: Texto tachado

Equivalente de etiqueta HTML: <del>

El texto tachado está tachado, Me gusta esto. Como en negrita y cursiva, puede hacer clic en el botón tachado y luego escribir, o puede resaltar el texto existente y aplicarle formato tachado.

Úselo para: Efecto humorístico (si eso se adapta a tu tono de blog), o para ofertas especiales en sus productos (puedes "tachar” el precio normal y mostrar el precio de oferta).

#2: Regla horizontal

Equivalente de etiqueta HTML: <hr />

La regla horizontal crea una línea que atraviesa su publicación. Puede ser útil para dividir una publicación en una o más secciones visuales. (aunque no actúa como "leer más” etiqueta).

Se parece a esto:

Úselo para: Marcando el inicio o el final de una publicación (por ejemplo. si va a presentar una nueva serie de publicaciones de blog al principio, o haciendo una oferta especial al final).

#3: Color de texto

Equivalente de etiqueta HTML: <estilo span =”color: #ff0000;”> (por el color rojo)

Su texto tendrá el color predeterminado establecido por el tema de su blog. – normalmente negro o gris muy oscuro.

A veces, es posible que desee poner el texto en un color diferente. Puedes hacer esto por:

seleccionando el color, usando el menú desplegable A, luego escribiendo
resaltar el texto existente y luego elegir un color para él.

Después de hacer clic en el menú desplegable, puede elegir un color simplemente haciendo clic en él:

Si tu prefieres, puede crear colores personalizados específicos haciendo clic en "Personalizar…” y luego configurar los valores RGB.

Úselo para: Texto de color ocasional, quizás para destacar un anuncio u oferta especial. Tenga cuidado de no exagerar con diferentes colores en sus publicaciones. Es posible que desee utilizar el "personalizado” opción de color para hacer coincidir el texto de color especial con la paleta de colores de su encabezado o marca en general.

#4: Pegar como texto

Equivalente de etiqueta HTML: n / A

La mayoría de las veces querrá pegar texto en el editor de WordPress y mantener su formato.. Si pega texto que redactó en Word, la mayor parte del formato se copiará automáticamente también.

Pero a veces es posible que desee pegar texto sin el formato. Simplemente haga clic en este botón, que parece una T en un portapapeles, para alternar el "pegar” función a "modo de texto sin formato".

De ahora en adelante, cuando pegas texto, todo el formato será eliminado. (Puede volver a hacer clic en él para volver al modo normal.)

Úselo para: Pegar texto con formato (por ejemplo. títulos de publicaciones de blog que tienen el formato de encabezado, cuando no desea conservar ninguno de los formatos). Recuerde volver a desactivarlo si solo desea usarlo temporalmente.

#5: Formato claro

Equivalente de etiqueta HTML: n / A

Para quitar el formato, no necesita deshacerse de cada caso de negrita, itálico, texto coloreado,  etc.. individualmente. En lugar, puede utilizar la opción "Borrar formato” botón, que parece un borrador.

Simplemente resalte el texto formateado que desea cambiar y haga clic en el botón.

Úselo para: Deshacerse del formato que no desea. Eso podría ser un formato que aplicó accidentalmente, o formato que apareció cuando copió texto en su publicación.

#6: Personaje especial

Equivalente de etiqueta HTML: n / A, aunque los caracteres individuales tendrán un código ASCII especial

De vez en cuando, es posible que desee incluir un carácter especial en su publicación o página que en realidad no pueda escribir, como el símbolo de copyright ©.

Para utilizar esta función, coloque el cursor donde desea que aparezca el carácter especial, luego haga clic en el símbolo Omega para abrir un panel de caracteres especiales y seleccione el que desee:

Úselo para: Insertar un aviso de copyright con ©, usando un registrado ® o marca registrada ™ carácter al escribir sobre sus productos / marca o el de otra persona (si es apropiado), o insertando cualquier otro carácter especial!

#7: Aumentar / disminuir sangría

Equivalente de etiqueta HTML: <p estilo =”padding-left: 30px;”>

Si desea aplicar sangría al texto (empújalo hacia la derecha), puedes usar esta función. El botón de la derecha de los dos crea la sangría; puede hacer clic en él nuevamente para aumentar la sangría.

Utilice el botón de la izquierda para reducir o eliminar una sangría que haya creado.

Úselo para: Puede optar por resaltar un texto específico con una sangría y quizás también con un color diferente (por ejemplo. si da un ejemplo dentro de un "cómo” paso).

#8: Deshacer rehacer

Equivalente de etiqueta HTML: n / A

Probablemente ya esté familiarizado con estos botones de su procesador de texto habitual. Utilice "Deshacer” (la flecha apuntando hacia la izquierda) para deshacer lo que sea que acabas de hacer. Utilice "Rehacer” si vuelves a cambiar de opinión.

Úselo para: Deshacer fácilmente una acción (por ejemplo. si aplicó el formato, se da cuenta de que no quiere, o borraste toda tu publicación por accidente y quieres recuperarla).

#9: Atajos de teclado

Equivalente de etiqueta HTML: n / A

La mayoría de las funciones de la barra de herramientas también tienen un atajo de teclado, para que pueda usarlos fácilmente sin tener que mover las manos del teclado al mouse. Haga clic en el ? botón para verlos en una lista práctica:

Algunos de estos atajos pueden resultarle familiares a otros programas, como Ctrl + B para "texto en negrita” y Ctrl + Z para "deshacer".

Pero hay otros aquí que son específicos del editor de WordPress., como Shift + Alt + m para insertar / editar una imagen.

Úselo para: Acelerando su flujo de trabajo, especialmente si hay un tipo de formato en particular que usa mucho.

Si bien los botones de la barra de herramientas de WordPress pueden no ser el aspecto más emocionante de los blogs, Ser capaz de formatear sus publicaciones y páginas de manera efectiva puede marcar la diferencia.. Las publicaciones bien formateadas se ven profesionales y son fáciles de leer, y las páginas bien formateadas pueden hacer un mejor trabajo al convertir prospectos en clientes potenciales o clientes..

¿Hay alguna función nueva que utilizará en su próxima publicación de blog?, o en una de tus páginas? Cual vas a probar?

¿O aprendiste sobre una característica que ni siquiera te diste cuenta de que existía? Háznoslo saber en los comentarios..

El cargo Cómo utilizar la barra de herramientas WYSIWYG WordPress dar formato a su blog como un profesional apareció por primera vez en ProBlogger.


      

Lea más sobre esto en problogger.com.

Vote

0 puntos
upvote downvote

Total de votos: 0

upvotes: 0

porcentaje upvotes: 0.000000%

downvotes: 0

downvotes porcentaje: 0.000000%