Tutorial WordPress

Tutorial Wp

ÍNDICE:

Introducción:

A continuación, se detallará el funcionamiento básico de de wordpress y como crear diferentes páginas, entradas portfolios, etc.

Para comenzar, explicaremos los diferentes tipos de páginas dentro de wordpress:

– Entradas: son las noticias o artículos que forman parte del diario, del blog propiamente dicho. Se organizan de forma cronológica, admiten categorías y etiquetas.

– Páginas: son contenidos estáticos. Son artículos que no forman parte del diario, no se organizan de forma cronológica, sino de forma jerárquica. Las páginas de primer nivel aparecen en el Menú principal. Ejemplo de páginas son: Página de inicio, contacto, quienes somos, etc.

– Portfolio: es un espacio destinado a mostrar trabajos que has realizado con anterioridad que reflejan la calidad de lo que sabes hacer.

A continuación, explicaremos la utilización de creación, modificación y borrado de contenido. Como apoyo para el tutorial, usaremos GIFs, donde se mostrará el proceso, para que sea más sencillo seguir este tutorial.

1. Acceder al gestor de WordPress:

Para poder realizar cualquier cambio, debemos acceder a nuestro wordpress, deberemos ir a la dirección que nos han proporcionado para poder acceder, en este caso es “www.miweb.es/wp-admin”. Una vez ahí, introducimos nuestro usuario y contraseña y le daremos al botón “Acceder”.

Entrar en el gestor de wordpress

2. Creación de contenido:

Ahora, pasaremos a explicar como crear contenido, crearemos una página, una entrada y un porfotlio:

2.1. Crear una página:

Para crear una página, iremos al menú de la izquierda, nos situaremos sobre el elemento “Páginas” del menú, seguido, se desplegará un submenú y haremos click sobre “Añadir nueva”. Para editar el contenido seguiremos los pasos del apartado de edición.

añadir nueva página

2.2. Crear una entrada:

Para crear una entrada, iremos al menú de la izquierda, nos situaremos sobre el elemento “Entradas” del menú, seguido, se desplegará un submenú y haremos click sobre “Añadir nueva”. Para editar el contenido seguiremos los pasos del apartado de edición.

2.3. Crear un portfolio:

Para crear un portfolio, iremos al menú de la izquierda, nos situaremos sobre el elemento “Portfolio” del menú, seguido, se desplegará un submenú y haremos click sobre “Añadir nuevo”. Para editar el contenido seguiremos los pasos del apartado de edición.

3. Eliminar contenido:

3.1. Eliminar una página:

Para eliminar una página, iremos al menú de la izquierda, nos situaremos sobre el elemento “Páginas” del menú, seguido, se desplegará un submenú y haremos click sobre “Todas las páginas”. Una vez en esta pantalla, nos mostrará todas las página creadas. Nos situaremos sobre la página que deseamos eliminar y le daremos a “Papelera”.

3.2. Eliminar una entrada:

Para eliminar una entrada, iremos al menú de la izquierda, nos situaremos sobre el elemento “Entradas” del menú, seguido, se desplegará un submenú y haremos click sobre “Todas las entradas”. Una vez en esta pantalla, nos mostrará todas las entradas creadas. Nos situaremos sobre la entrada que deseamos eliminar y le daremos a “Papelera”.

3.3. Eliminar un portfolio:

Para eliminar un portfolio, iremos al menú de la izquierda, nos situaremos sobre el elemento “Portfolio” del menú, seguido, se desplegará un submenú y haremos click sobre “Todos los portfolios”. Una vez en esta pantalla, nos mostrará todos los portfolios creados. Nos situaremos sobre la entrada que deseamos eliminar y le daremos a “Papelera”.

4. Acceso a editar contenido:

4.1. Acceder a editar una página:

Para editar una página, iremos al menú de la izquierda, nos situaremos sobre el elemento “Páginas” del menú, seguido, se desplegará un submenú y haremos click sobre “Todas las páginas”. Una vez en esta pantalla, nos mostrará todas las página creadas. Nos situaremos sobre la página que deseamos editar y le daremos a “Editar” o también sobre el título de la página.

4.2. Acceder a editar una entrada:

Para editar una entrada, iremos al menú de la izquierda, nos situaremos sobre el elemento “Entradas” del menú, seguido, se desplegará un submenú y haremos click sobre “Todas las entradas”. Una vez en esta pantalla, nos mostrará todas las entradas creadas. Nos situaremos sobre la entrada que deseamos editar y le daremos a “Editar” o también sobre el título de la entrada.

4.3. Acceder a editar un portfolio:

Para editar un portfolio, iremos al menú de la izquierda, nos situaremos sobre el elemento “Portfolio” del menú, seguido, se desplegará un submenú y haremos click sobre “Todos los portfolios”. Una vez en esta pantalla, nos mostrará todos los portfolios creados. Nos situaremos sobre la entrada que deseamos editar y le daremos a “Editar” o tambien sobre el título del portfolio.

4.4. Otra forma de acceder a editar contenido:

Esta manera puede ser mas fácil, una vez hayamos accedido al gestor, podemos navegar por nuestra web, veremos que se muestra igual excepto que se muestra una barra negra en la parte superior con varias opciones. iremos a la página/portfolio/entrada que deseamos editar. Y en la nueva barra que aparece le daremos a “Editar Página/Entrada/Portfolio” según se de el caso. Esto nos llevará al editor del propio contenido.

A continuación, procederemos a insertar contenido dentro de cada página/entrada/portfolio. En primer lugar, enseñaremos a insertar contenido desde el editor de contenido propio de wordpress:

4.5.Editar contenido:

Para comenzar adecuadamente, iremos a la página/entrada/portfolio que deseamos editar.

4.5.1. Añadir título:

Para añadir el título, simplemente iremos al campo de texto donde pone “Introduce el título aquí”, pondremos el título a convenir.

insertartitulo

4.5.2. Añadir subtítulos:

Para esto, deberemos escribir en el bloque de texto grande el texto deseado. Para poner un subtitulo, de diferentes tamaños, deberemos seleccionar el texto que queremos que sea un subtitulo, ir a la esquina superior izquierda del bloque, en el desplegable que pone “Párrafo”, hacemos click y seleccionamos el título que deseamos.

4.5.3. Poner texto en negrita:

Para poner texto en negrita, seleccionaremos el texto deseado y en la barra de opciones del bloque de texto, haremos click en el botón “B“. Para quitar la negrita, seleccionaremos el texto en negrita y le volveremos a dar al botón “B“.

4.5.4. Poner texto en cursiva:

Para poner texto en cursiva, seleccionaremos el texto deseado y en la barra de opciones del bloque de texto, haremos click en el botón “I“. Para quitar la cursiva, seleccionaremos el texto en negrita y le volveremos a dar al botón “I“.

4.5.5. Añadir y eliminar enlaces:

Para añadir un enlace, seleccionaremos el texto o imagen deseado para hacer de enlace. En la barra de opciones del bloque de texto, haremos click sobre el icono de la cadena. Nos aparecerá un campo de texto, donde escribiremos la dirección web que deseamos enlazar. Una vez escrita correctamente, le daremos al botón azul (Aplicar) y estará creado el enlace.

Otra forma añadir un enlace, esta forma es la mas sencilla para añadir enlaces a una página/entrada/portfolio de nuestra propia página. Seleccionaremos el texto o imagen deseado para hacer de enlace. En la barra de opciones del bloque de texto, haremos click sobre el icono de la cadena. Nos aparecerá un campo de texto, le daremos al icono del engranaje (ruedita). Aparecerá una ventana, donde en el cuadro inferior aparecerán todas las páginas/entradas/portfolio creadas en nuestra web, buscamos la deseada y le damos a Añadir enlace. Si no encontramos el contenido deseado, podremos buscar en el campo de texto de justo encima.

Para eliminar un enlace, simplemente, haremos click sobre el enlace y en la barra de opciones del bloque de texto, haremos click sobre el icono de la cadena rota. De esta manera, el enlace se eliminará.

4.5.6. Añadir y eliminar imágenes:

Para añadir imágenes, deberemos posicionarnos en la zona donde queremos añadir la imagen, e iremos al botón de “Añadir objeto”. Nos aparecerá una ventana, donde si no tenemos ninguna imagen, nos aparecerá un botón de “Selecciona archivos”. Si ya tenemos imágenes, deberemos ir a la pestaña de “Subir archivos”, donde nos aparecerá dicho botón. Le damos y seleccionaremos el archivo deseado. Para finalizar, le damos al botón de “Insertar en …” que esta en la esquina inferior derecha de la ventana.

Para eliminar la imagen, haremos click sobre esta, no aparecerá una barra de opciones y le daremos a la “X“.

4.5.7. Añadir un archivo:

Para añadir archivos, deberemos posicionarnos en la zona donde queremos añadir la imagen, e iremos al botón de “Añadir objeto”. En este caso, iremos a la pestaña “Subir archivos” , le damos al botón seleccionar archivos y seleccionamos el archivo deseado. Para finalizar, le damos al botón de “Insertar en …” que esta en la esquina inferior derecha de la ventana. En este caso, se creara un enlace al archivo.

4.6. Edición con Visual Composer:

Visual Composer es una herramienta de wordpress para maquetar e incluir contenido en nuestras páginas entradas o portfolio de una manera más visual, pudiendo arrastrar y soltar diferentes elementos.

A continuación pasaremos a añadir componentes básicos y editarlos.

4.6.1. Acceder al editor de Visual Composer:

Para acceder al editor de Visual composer,  deberemos darle al botón azul que aparece debajo del titulo del contenido, que pone “backend editor”. Y nos mostrará el editor de Visual Composer. Para volver al editor básico de WordPress, deberemos darle al mismo botón, donde ahora pondrá “Classic editor”.

4.6.2. Añadir un elemento:

Para añadir un nuevo elemento, haremos click sobre cualquier botón “+” dentro del editor de contenido de VC. Pero recomiendo que se haga click sobre el + peque que aparece debajo del último elemento, para que se introduzca correctamente debajo del último. Una vez dado, nos aparecerá una ventana donde seleccionaremos el elemento a introducir, en este caso un bloque de texto. Escogeremos las opciones deseadas e introduciremos los datos o textos deseados y le daremos a “Save changes”.

4.6.3. Editar un elemento:

Para editar un elemento, hay que poner el puntero sobre el elemento deseado y aparecerá una barra verde, habrá que darle al icono del lápiz. Aparecerá la ventana de edición donde en este caso el editor de texto es igual que el básico de wordpress. Una vez realizados los cambios hay que darle al botón de “Save changes”.

4.6.4. Clonar contenido:

Para clonar un elemento, deberemos posicionarnos sobre el elemento y aparecerá una barra verde, haremos click sobre el icono del dos cuadrados superpuestos. De esta manera se duplicará ese elemento.

4.6.5. Borrar contenido:

Para borrar un elemento, nos posicionaremos sobre el elemento a borrar y aparecerá una barra verde. Le daremos al icono de la papelera, nos aparecerá un aviso del navegador preguntado si realmente deseamos borrar el elemento y le damos a “Aceptar”.

4.6.6. Insertar un elemento imagen:

Como anteriormente vimos, le daremos al botón + Para añadir un nuevo elemento, en este caso, se llama “imagen única”, damos click sobre ella. A continuación nos mostrará una ventana, para añadir una imagen, en el apartado “Image”, le damos al ‘+’ que esta dentro de un recuadro. Nos abrirá la biblioteca y elegimos la imagen deseada. Para finalizar, en el apartado “Tamaño de imagen”, pondremos la medida de imagen deseada (debajo explica como), en este caso a tamaño completo.

En caso de editar la imagen, seguir los pasos anteriormente explicados.

4.7. Estado de página/entrada/portfolio:

Ahora, continuaremos explicando en las situaciones que puedes estar una página/entrada/portfolio, puede estar en tres estados una vez publicada:

  • Privada: solo podrán acceder a ella los usuario con permisos para hacerlo, es decir no esta abierta al público.
  • Con contraseña: Está abierta al público, pero para acceder a ella debes introducir una contraseña y que esta sea correcta.
  • Público: por lo general es como siempre va a ser y la opción con la que se pública por defecto. Esta abierta al público y todo el mundo la podrá ver.

Para cambiar el estado de la página debemos ir al bloque de la parte superior derecha, llamado “Publicar”. Iremos a la opción con el icono del ojo que poner “Visibilidad” y le damos a “Editar” y elegiremos la opción deseada. Si elegimos con contraseña, nos aparecerá un campo de texto donde deberemos añadir la contraseña deseada. Para finalizar le daremos al botón de “Aceptar”.

4.8. Guardar cambios:

Una vez realizados todos los cambios deseados, para que lo que hemos modificado se guarde y y se muestren dichos cambios en la web, deberemos ir al bloque “publicar” que se sitúa en la parte superior derecha de la página. Si acabamos de crear el contenido, aparecerá un botón “Publicar” en cambio si estamos editando el contenido aparecerá un botón “Actualizar”. Ambos son el mismo y realizan la misma función. Le daremos y de esta manera se guardarán los cambios.

4.9. Imagen destacada y categorías:

En este apartado, explicaremos características que con propias de entradas y porfolios en cambio de páginas no.

4.9.1. Añadir imagen destacada:

Para añadir una imagen destacada, deberemos ir al bloque “Imagen destacada”, que suele estar posicionado en la parte inferior derecha de la pagina. Para añadir una, le daremos a “Asignar imagen destacada” y seguiremos los pasos explicados anteriormente para seleccionar una o subirla.

4.9.2. Añadir categorías:

Para añadir categorías, iremos al bloque “Categorías”, que se encuentra en la parte derecha de la página. Si queremos que no este en una categoría, simplemente debemos desmarcarla. Si queremos que este en una categoría ya existente, simplemente debemos marcarla. Si en cambio, queremos que este en una categoría que no existe, deberemos dar a “+ Añadir nueva categoría”, nos aparecerá un campo de texto, pondremos la categoría deseada y le daremos a “Añadir nueva categoría”, una vez añadida, automáticamente aparecerá marcada.

4.10. Editar SEO:

En este paso, modificaremos el contenido que se usa para que la web pueda posicionar mejor en los diferentes buscadores web, tendrá dos campos para editar:

4.10.1. Title:

Debajo del bloque de edición de texto del contenido, en un bloque llamado “All in one SEO Pack”, encontraremos varias casillas a rellenar. En el campo título, debemos poner un titulo que describa brevemente el contenido, teniendo en cuenta que la longitud de este debe estar entre los 30 y 60 caracteres. Debajo de dicho campo de texto, tendremos un contador, que nos indicará los caracteres que llevamos introducidos. En el momento que este, esté en rojo, indicará que nos hemos pasado. Siempre estará incluido el titulo de la web con un separador, por eso el contador no empezará de 0.

4.10.2. Descripción:

En el mismo bloque que el anterior, en el campo de “Descripción” introduciremos un texto relacionado con el contenido, este debe tener un mínimo de 120 caracteres y un máximo de 156 caracteres.

5. Slider Revolution:

Slider Revolution es un plugin de wordpress, con el cual puedes generar slider el cuan  es una presentación con imágenes fondo y enlaces.

5.1. Acceder a un slider:

Para acceder a un slider, deberemos ir al menú de la izquierda y buscar “Slider revolution”, lle daremos y nos aparecerá un listado con los slider que tenemos. Nos situaremos sobre el que queremos editar y aparecerá un menú encima, le daremos al icono del lápiz para comenzar a editar.

5.2. Cambiar imagen de slide:

Para cambiar la imagen del slider, iremos a la opción “Main background” dentro a “Source” y para finalizar, seleccionar “Main/background image”. Este paso, debe estar por defecto. Ahora, para cambiar la imagen debemos darle a botón azul “Media library”, este nos llevará a la biblioteca multimedia, elegimos la foto deseada y darle al botón “Insert” para poner la nueva imagen.

5.3. Cambiar el texto de un slide:

Para cambiar el texto de un slide, bajamos hasta el contenido, hacemos click sobre el texto y nos mostrará un campo de texto negro, ahí podremos cambiar el texto a nuestro gusto.

5.4. Cambiar enlace de botón:

Debemos seleccionar el botón, ir a la pestaña “actions” y en la fila, en el tercer campo, debemos cambiar la dirección actual por la deseada.

5.5. Guardar cambios de slide:

Para guardar los cambios, debemos ir a la esquina superior, nos aparecerán varios botones de varios colores, para guardar le daremos a verde.

6. Modificación de menú:

Ahora explicaremos como añadir y quitar elementos del menú.

6.1. Acceder a la edición de menú:

Para acceder a la edición de menú, iremos al menú de la izquierda, nos situaremos sobre “Apariencia”, se desplegará un menú y le daremos a “Menús”.

6.2. Añadir elementos al menú:

Para añadir uno o varios elementos al menú, en el menú de la izquierda llamado “Páginas”, seleccionaremos las páginas que deseamos añadir y le daremos al botón “Añadir al botón”.

6.3. Eliminar un elemento:

Para eliminar un elemento en el menú, debemos desplegar el elemento haciendo click sobre el. Daremos click en “Eliminar” que se encuentra en la parte inferior izquierda del menú desplegado.

6.4. Mover elementos de menú:

Para mover los elementos de un menú, mantendremos click sobre un elemento y lo arrastraremos a la posición deseada.

6.5. Guardar menú:

Para guardar el menú, daremos click sobre el botón “Guardar menú”que se sitúa en la parte inferior derecha de la página o en la parte superior derecha.