Volver a Tacte

CONTENIDO

A lo largo de la guía de usuario encontrarás toda la información necesaria para sacarle el máximo partido al tema WordPress Tacte, cómo empezar a darle forma a tu sitio y darle tu toque personal mediante todas las funcionalidades que incluye. Aquí te dejamos un índice de los contenidos que tratamos en la Guía de Usuario.

  • Qué incluye Tacte
  • Principales características
  • Primeros pasos
    • Instalación de WordPress en el servidor
    • Instalar el tema
    • Instalar el plugin de Últimas Entradas
  • Puesta a punto: Configuraciones esenciales
    • Enlaces permanentes o
    • Creación del menú de Navegación.
    • Logo de la cabecera (Header) y estilo general.
    • Página de inicio y slider.
    • Configuración de las páginas de archivo (Blog y Misceláneos).
    • Imágenes de Cabecera.
    • Configuración de las páginas.
    • Pie de página (Footer).
  • Creando contenido: Slider
  • Creando contenido: Blog y tipos de entradas
  • Trucos y consejos
    • Google Analytics
  • Archivos y créditos

 

QUÉ INCLUYE TACTE

Al descargar el tema Tacte, obtenemos un archivo comprimido que contiene:

  • Archivo comprimido del tema (.zip) listo para instalarse en el admin de WordPress.
  • Archivo comprimido del plugin “Últimas entradas” con diseño exclusivo del tema.
  • PSDs
  • Archivos de texto con información complementaria sobre el tema.

 

PRINCIPALES CARACTERÍSTICAS

Tacte es un tema gratis que cuenta con un diseño muy atractivo y actual, además de que tiene muchas opciones de personalización: puedes configurar fácilmente tanto su diseño (colores, imágenes, etc.) como la estructura de diversas páginas (archivos, páginas, búsqueda, etc.).

Además, cuenta con un slider en la página principal muy sencillo de configurar. Aparte cada diapositiva o slide puede tener diferente título, contenido, alineación y botón con enlace.

Finalmente, cuenta con un pie de página sencillo con enlaces a redes sociales e información personalizada que puedes mostrar o no.

 

PRIMEROS PASOS

Aquí te detallamos todos los pasos que tienes que seguir antes de ponerte manos a la obra con el tema.

 

Instalación de WordPress en el servidor

El primer paso antes de poner a punto tu nuevo tema es instalar WordPress en el servidor o hosting que hayas contratado. Si desconoces como hacerlo, no hay de qué preocuparse, pues es mucho más sencillo de lo que parece. En el siguiente enlace se explica paso a paso y de una manera muy clara cómo hacer esto:

Cómo instalar WordPress en tu servidor paso a paso

 

Instalar el tema

Instalar el tema es tan sencillo que asusta. Una vez tengas el archivo comprimido (.zip) de Tacte, deberás ir en el admin de WordPress a Apariencia > Temas (Appearance > Themes) y una vez allí pulsar el botón de Añadir Nuevo (Add New) situado en la parte superior al lado del título. Nos saldrá otra pantalla con los temas WordPress más populares, últimos lanzamientos, etc. Nosotros volveremos a buscar el botón situado a la parte superior y le haremos click a Subir Tema (Upload Theme).

Una vez hecho esto, nos saldrá un botón de “Seleccionar archivo…”, pulsamos y buscamos la ubicación donde descargamos el zip. Seleccionaremos el archivo “tacte-theme-v1.zip” —IMPORTANTE: puede que tengas una versión anterior y el número después de Tacte sea diferente, para descargar la última versión del tema visita este enlace— y le damos a Instalar ahora (Install Now).

Finalmente, te saldrá una última pantalla informándote de que el tema se ha instalado con éxito. De las tres opciones, selecciona la de Activar (Activate) y ya tendrás el tema listo para configurar a tu gusto. En la página de tus Temas instalados puedes también activar Tacte en cualquier momento.

 

Instalar el plugin de Últimas Entradas

Dentro del archivo zip que descargaste encontrarás el plugin de Últimas Entradas, el cual debemos instalar en Plugins > Añadir nuevo (Plugins > Add new). Simplemente pulsaremos el botón de Subir plugin y en la siguiente página al pulsar “Seleccionar archivo” buscaremos el zip llamado “tacte-last-posts-widget-v1.zip” y lo instalaremos. Solamente nos quedará activarlo y finalmente ponerlo en nuestra barra lateral (sidebar) dentro de Apariencia > Widgets (Apperance > Widgets).

 

PUESTA A PUNTO: CONFIGURACIONES ESENCIALES

La mayoría de cosas que puedes personalizar del tema deben ser configuradas dentro de Apariencia > Opciones del tema (Appearance > Theme Options). Siguiendo estos pasos te enseñaremos a poner a punto tu blog y a darle el estilo que más te guste.

 

Enlaces permanentes o Permalinks

Antes de configurar las opciones de tu tema es muy importante el uso de urls amigables, tanto para el SEO de tu sitio como para el buen funcionamiento del tema. Para configurar las URLs amigables, debemos dirigirnos a Ajustes > Enlaces permanentes (Settings > Permalinks) y seleccionar la opción de Nombre entrada (Post name) en la sección de Ajustes comunes (Common settings).  Una vez hecho esto, guardamos cambios.

 

Creación del menú de navegación

También es importante crear el menú de navegación que aparecerá en la parte superior derecha de la cabecera. Para ello, dirígete a Apariencia > Menús (Appearance > Menus). En esta página o sección vemos que aparece a la izquierda una ventana que permite insertar las páginas que tenemos creadas, enlaces y categorías en nuestro nuevo menú. Simplemente seleccionamos aquello que queremos añadir y lo arrastramos arriba o abajo en la ventana de la derecha para determinar el orden en el que aparecerá. Finalmente le ponemos un nombre a nuestro menú y le damos a Guardar Menú (Save Menu).

Después de esto debemos pulsar la pestaña de Gestionar lugares (Manage Locations) ubicado arriba de la ventana de Menús. Aquí nos sale un dropdown para indicar qué menú de los que tenemos creados será el que aparecerá en el Header; seleccionamos el menú que hemos creado anteriormente y le damos a Guardar cambios (Save changes).

 

Logo de la cabecera (Header) y estilo general

El primer paso para darle tu primer toque es personalizar y configurar el logotipo, el cual se sitúa en la parte superior izquierda de nuestro sitio. Para ello, debemos dirigirnos a Apariencia (Appearance) > Opciones del Tema (Theme Options) > Estilo General (General Style). Aquí veremos la sección de Logo, en la cual tenemos un uploader de imágenes donde subiremos nuestro logotipo, en el caso de que queramos mostrarlo como imagen (recomendamos que esté en formato .png). Si lo que queremos es mostrar el título de nuestro sitio como texto simplemente borraremos la imagen o deseleccionaremos la casilla de “Mostrar Logo en la Cabecera?”.

Theme-Options-Tacte

En esta pestaña de las Opciones del tema también encontramos un apartado destinado a los Colores Principales del sitio. Aquí elegiremos pues los colores principales que queremos para los elementos principales de nuestro tema, los cuales siempre podremos revertir a los predeterminados.

Una vez hecho todo esto y lo dejemos todo a nuestro gusto, guardaremos los cambios.

 

Página de Inicio y Slider

Dependiendo de vuestras preferencias, desearéis mostrar un contenido u otro en vuestra página de inicio. Si lo que queréis es mostrar las últimas entradas del blog, podéis dejar por defecto las opciones de WordPress y no tocar nada en este apartado. Si por el contrario queréis mostrar una página con contenido personalizado, debéis seguir estos pasos:

  1. Crear dos páginas, una para el blog —con poner el título bastará, no es necesario poner contenido— y una para la página de inicio.
  2. Ir a Apariencia > Personalizar (Appearance > Customize) y una vez allí darle clic al desplegable “Página Frontal Estática” (Static Front Page). Elegiremos la opción de “Una página estática.
  3. En el primer desplegable seleccionamos la página que creamos para el Inicio con vuestro contenido personalizado.
  4. En el segundo desplegable seleccionamos la página que creamos destinada al blog.
  5. Guardamos los cambios. ¡Listo!

Una vez hayamos elegido nuestra página principal, es el momento de configurar las opciones generales del slider. Aunque es conveniente crear al menos un slide para ver cómo queda nuestro slider, no es estrictamente necesario. Si deseáis empezar a crear contenido antes de configurar vuestro slider, dejad estas opciones para más adelante.

Así pues, todas las opciones generales del slider se encuentran dentro de las Opciones del tema, en el apartado del Slider de la Página de Inicio. Ahí vemos en primer lugar un checkbox que nos pregunta si queremos que se muestre el slider en la página de inicio. En segundo lugar podemos elegir el diseño, donde encontramos uno de ancho fijo (boxed) y otro de ancho completo (full width). Finalmente, tenemos un apartado en la parte inferior de la pestaña para elegir los colores principales que tendrá el slider, como por ejemplo para las flechas de navegación, el botón, título, fondo, etc.

 

Configuración de las páginas de archivo (Blog y Misceláneos).

Cuando hablamos de “Blog y Misceláneos” nos referimos a las páginas siguientes: Archivo del Blog (Archive o Blog Feed), entrada (single post), resultados de búsqueda y página de error (404). Todas estas páginas comparten el mismo estilo y diseño, el cual no obstante puede ser diferente al de las otras páginas con contenido que creemos nosotros.

Para cambiar el diseño de estas páginas de blog y misceláneos tenemos que dirigirnos dentro de las Opciones del tema a “Blog y Misc.”. En primer lugar vemos las opciones del diseño: estructura y diseño de la cabecera. Como vemos, tenemos varias opciones y tan sólo tenemos que elegir el estilo que más se ajuste a lo que nosotros queremos.

Por otra parte, tenemos la opción de elegir los colores principales de las páginas de blog y misceláneas, las cuales por supuesto elegiremos también a nuestro gusto.

Finalmente, en el último apartado tenemos una casilla de texto donde podemos elegir el título de nuestra página de blog o archivo, ya que por defecto WordPress asigna a esta página el título de “Archivo”. Si escribimos un título éste aparecerá en su defecto, siempre y cuando el blog no sea la página principal, y si lo es, que éste no muestre el slider.

Por otra parte, sólo nos quedará un checkbox dónde podemos elegir si queremos que se muestre todo el contenido de las entradas en el archivo del blog. Si sólo queremos mostrar una parte de su contenido, desmarcaremos la casilla y… ¡listo!

 

Imágenes de cabecera

En las Opciones del tema encontramos una sección de “Imágenes de Cabecera” donde podemos elegir las imágenes de las cabeceras de las páginas del apartado anterior, siempre y cuando queramos que éstas muestren imágenes de fondo en lugar de un color plano.

Para mostrar estas imágenes, simplemente subiremos las que queramos mostrar en el correspondiente uploader: Blog Feed, Search y 404.

Ten en cuenta que en este apartado no se incluye la imagen de cabecera de las entradas, pues estas mostrarán la imagen que hayamos elegido para el blog feed. Por otra parte, si en una entrada asignamos una imagen destacada, ésta será la que prevalecerá y por tanto la que se mostrará en la cabecera.

 

Configuración de las Páginas

Con Tacte tenemos la opción de elegir un diseño diferente que se aplique a todas las páginas con contenido que creemos, de una manera parecida a la del apartado de Blog y Misceláneas. Así pues, para configurar la apariencia de estas páginas tan sólo tendremos que acceder a la sección de “Páginas” dentro de las Opciones del tema.

Una vez en esta pestaña del Theme Options, elegiremos un diseño de estructura y de cabecera así como los colores principales de las páginas a nuestro gusto.

 

Pie de página (Footer)

Como ya comentamos en las características principales, en el footer se muestran los enlaces a las redes sociales así como también un texto personal.

Para configurarlo, tenemos por un lado el apartado de “Pie de Página” dentro de las Opciones del tema, donde podemos elegir los colores del pie de página así como también escribir el texto opcional que se muestra debajo de los enlaces de las redes sociales.

Para estar más al día, es indispensable tener bien visibles vuestras Social Networks, y es por eso que tenemos un apartado dentro de las Opciones del tema para introducir vuestros enlaces y de este modo mostrarlos en el pie de página mediante iconos.

 

CREANDO CONTENIDO: SLIDER

En nuestro slider debemos colocar la información clave que nos redirige a los apartados de nuestro sitio que queremos destacar. Es por eso que hemos creado un slider para Tacte completamente personalizable donde podemos elegir para cada slide la imagen que muestra, título, contenido y botón.

Para crear un slide debemos dirigirnos al apartado de Slider de la Página de Inicio en nuestro menú de WordPress y pulsar el botón de Añadir slide. Como vemos, la interfaz es exactamente igual a la que vemos cuando creamos una entrada o una página.

Cada uno de los elementos del slide los configuramos en…

  • Título del slide: parte superior.
  • Contenido del slide: editor de texto de WordPress.
  • Imagen de fondo: imagen destacada.
  • Alineación de contenido: en el apartado inferior de Slider Options, en el desplegable.
  • Botón: debajo de las opciones de alineación.

 

CREANDO CONTENIDO: BLOG Y TIPOS DE ENTRADAS

Crear una entrada en Tacte es sencillo, como debería serlo en todos los temas que descarguemos. No obstante, queremos resaltar dos aspectos que tienen que ver con la página de edición de entradas.

Por una parte, tal y como vemos en el demo del tema, existen varios tipos de entradas (o post types) los cuales podemos crear fácilmente. Aquí te explicamos cómo crear cada una de ellas fácilmente.

 

Entrada con formato: estándar

Es una entrada sencilla que puede tener todo tipo de contenido. Su visualización en el blog feed (archivo) incluye el título y el texto.

 

Entrada con formato: imagen destacada

Es una entrada sencilla que puede tener todo tipo de contenido, en la cual asignamos una imagen destacada (a la derecha del editor).

Si seleccionamos en Formato (a la derecha del editor) la opción estándar, la imagen destacada aparecerá tanto en el blog feed como de imagen de fondo en la cabecera de la entrada, donde aparece el título y la información de publicación. Si por el contrario seleccionamos cualquiera de las otras opciones (galería, cita, etc.) la imagen destacada solamente aparecerá en la cabecera de la entrada; es decir, no aparecerá en la página del blog.

 

Entrada con formato: vídeo

Es una entrada sencilla que puede mostrar cualquier contenido y que debe incluir, al menos, un vídeo. El primer vídeo de la entrada será el que se mostrará en el feed del blog junto con el título.

Recuerda que si quieres que se muestre el contenido del formato correctamente en el feed del blog, debes seleccionar Video como Formato (a la derecha del editor).

 

Entrada con formato: cita

Es una entrada sencilla que puede mostrar cualquier contenido y que debe incluir, al menos, una cita. La primera cita de la entrada será la que se mostrará en el feed del blog junto con el título.

Debajo del editor de la entrada tenemos unas opciones de personalización exclusivas del formato de entrada de cita. Como vemos, hay un apartado para texto dónde debemos colocar el autor de la cita que se mostrará en el feed del blog. Si dejamos este campo en blanco, el autor simplemente no aparecerá.

Recuerda que si quieres que se muestre el contenido del formato correctamente en el feed del blog, debes seleccionar Cita como Formato (a la derecha del editor).

 

Entrada con formato: enlace

Es una entrada sencilla que puede mostrar cualquier contenido y que debe incluir, al menos, un enlace. El primer enlace de la entrada será el que se mostrará en el feed del blog junto con el título.

Recuerda que si quieres que se muestre el contenido del formato correctamente en el feed del blog, debes seleccionar Enlace como Formato (a la derecha del editor).

 

Entrada con formato: galería

Es una entrada sencilla que puede mostrar cualquier contenido y que debe incluir, al menos, una galería. La primera galería de la entrada será la que se mostrará en el feed del blog junto con el título.

Recuerda que si quieres que se muestre el contenido del formato correctamente en el feed del blog, debes seleccionar Galería como Formato (a la derecha del editor).

 

TRUCOS Y CONSEJOS

En ésta sección te dejamos algunos trucos y consejos para ayudarte a sacar el máximo partido a Tacte. ¡No te pierdas nada!

 

Google Analytics

Google Analytics es una herramienta gratuita proporcionada por Google para los propietarios de páginas web. Con esta herramienta puedes analizar a tus visitantes y conocer su comportamiento pudiendo mejorar el rendimiento del sitio web.

Como propietarios de una página web sabemos que es una herramienta indispensable, es por ello que facilitamos al máximo su integración con el tema Tacte. Simplemente sigue los siguientes pasos:

  1. Si ya dispones de una cuenta de Google Analytics, pasa directamente al paso 2, sino es así haz click en el siguiente enlace para crearla: http://www.google.es/intl/es/analytics/features/index.html
  2. Una vez tengas una cuenta de Google Analytics tendrás que configurar el código de seguimiento web, para ello inicia sesión en tu cuenta y haz click en Administrador, en el menú superior. En la columna Cuenta y en la columna Propiedad, seleccione la propiedad con la que estás trabajando. Haz clic en Información de seguimiento / Código de seguimiento.GAnalitycs-TrackingCode
  3. Localiza el fragmento de código de seguimiento, el cual aparece en un cuadro entre las etiquetas <script> </script>. El código de seguimiento contiene un ID exclusivo que corresponde a cada propiedad de Google Analytics. No mezcles fragmentos de código de seguimiento de propiedades distintas y no utilices el mismo fragmento de código de seguimiento en varios dominios.
  4. Copia el fragmento de código entero sin las etiquetas <script> </script>.
  5. Ahora abre el Escritorio de WordPress y dirígete a Apariencia (Appearance) > Theme Options, abre la pestaña Google Analytics y pega el código en el cuadro de texto, guarda y ¡listo!

GAnalitycs-Tacte

Puedes verificar que has hecho todos los pasos adecuadamente a través del siguiente link (https://support.google.com/analytics/answer/1008083), de esta forma podrás asegurarte al 100% de que has configurado correctamente tu código de seguimiento.

 

ARCHIVOS Y CRÉDITOS

Aquí dejamos una lista de todos aquellos recursos que hemos utilizado para crear Tacte.

 

CSS

  1. Animate.css by Daniel Eden (https://github.com/daneden/animate.css)
  2. Slick.css by Ken Wheeler (http://kenwheeler.github.io/slick/)

jQuery

  1. Classie.js by desandro (https://github.com/desandro/classie)
  2. Modernizr.js
  3. Viewportchecker.js by dirkgroenen (https://github.com/dirkgroenen/jQuery-viewport-checker)
  4. Slick.js by Ken Wheeler (http://kenwheeler.github.io/slick/)

 

Recursos

  1. Off-Canvas Menu Effects by Mary Lou (http://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/)

 

Media

  1. Daniel M Viero (http://danielmviero.com/)
  2. Stacie (https://www.flickr.com/photos/35754040@N04/)
  3. Dear Lizzy (https://vimeo.com/user12271617)