Documentación Orbit

1. Instalación

En el panel de administración vamos al menú Apariencia > Temas y pinchamos en el botón Añadir nuevo.

Doc Orbit 01 Instalacion 01

Buscamos “Orbit”. En el resultado de la búsqueda nos aparece una vista previa. Pasamos el ratón por encima y pinchamos en Instalar.

Doc Orbit 01 Instalacion 02

Esperamos unos instantes para que lo instale. Una vez instalado debemos activarlo. Sólo tenemos que pinchar Activar.

Doc Orbit 01 Instalacion 03

2. Opciones orbit

2.1 General

En esta sección puedes cambiar aspectos que afectan a toda la web.

Para acceder a esta sección debes ir a: Apariencia > Personalización > General

Esquema de colores

Tienes 3 para elegir. En este tutorial te explico como personalizar el tuyo.

Posición barra lateral

Actualmente el tema Orbit tiene 2 plantillas con barra lateral independiente. Esta configuración cambia la posición de las dos plantillas. Existe una tercera barral lateral en la página de inicio que está a la derecha y no se puede cambiar.

Mostrar Ruta Breadcrumb

Puedes activar o desactivar la ruta de navegación o breadcrumb. Aparece en todas la páginas de la web, excepto en la página de inicio. Este es el aspecto que tiene.

Doc Orbit 02 01 General 03

NO Mostrar título principal (h1) en las páginas

Las páginas creadas en nuestro WordPress muestran el título justo después del menú (o del breadcrumb). Si queremos que NO aparezca este título debemos introducir el slug de cada página separada por espacios.

El slug es el nombre que WordPress le da a las páginas para construir la URL (si usas permalinks) y puedes verlo en la ventana de edición de la página, tal como se indica en la siguiente imágen.

Doc Orbit 02 01 General 06

Información a pie de página

Si quieres añadir el símbolo de copyrigth © añade ©. Para añadir el símbolo de marca registrada ® añade ®

Doc Orbit 02 01 General 04

CSS Personalizado

Código CSS para personalizar el diseño de la plantilla.

El estilo de Orbit se construye de forma modular con archivos less, si quieres tenerlos ponte en contacto conmigo.

2.2 Página de inicio

En este sección puedes configurar los diferentes apartados de la página de inicio.

Para acceder a esta sección debes ir a: Apariencia > Opciones de Orbit > Página de inicio

Doc Orbit 02 04 Pagina Inicio 01

URL del botón “Call to Action”

URL es el enlace que tiene el botón principal. Aquí debemos introducción la URL o dirección web de la página que el botón debe mostrar. Por ejemplo:

Doc Orbit 02 04 Pagina Inicio 02

Si no tienes claro cómo encontrar tu URL, sólo tienes que navegar por tu sitio web hasta encontrar la página deseada y copiar la url de la barra de direcciones de tu navegador y pegarla en el campo URL del botón “Call to Action”.

Entradas en la Página de Inicio

Puedes mostrar las últimas entradas de tu blog en la página de inicio. Inserta el número que quieres mostrar. Si es mayor que 0 se mostrará la barra lateral de la página de inicio (debes añadir algún widget en “Barra Página de Inicio”).

Imágenes del slider

Cada imagen tiene un texto y una url. Hay tres imágenes, pero podemos añadir más hasta un máximo de 6. En este tutorial te explico como hacerlo. Tienes la opción de configurar el slider con 3 parámetros:

  • Control Manual: Aparecen los círculos para seleccionar una imágen determinada
  • Iniciar pase automaticamente: Al entrar en la web el slider se inicia automáticamente
  • Velocidad del pase de imágenes: Tiempo entre imagen e imagen (en milisegundos)

2.3 Fuentes

En esta sección puedes cambiar los tipos de fuentes que afectan a toda la web.

Para acceder a esta sección debes ir a: Apariencia > Personalización > Fuentes

En la configuración de las fuentes, el campo Google Font tiene prioridad. Si quieres un conjunto de fuentes ofrecido en el campo de selección, debes dejar en blanco el campo de Google Font.

Doc Orbit 02 02 Fuentes

2.4 Entradas

En esta sección puedes cambiar aspectos que afectan a las páginas de entradas

Para acceder a esta sección debes ir a: Apariencia > Personalización > Entradas

Paginación

Para la navegación por las entradas del blog tienes dos opciones:

Enlace “Antiguas/Recientes”

Doc Orbit 02 01 General 01

Número Página “1,2,3 … 5”

Doc Orbit 02 01 General 02

Mostrar Autor, Cateogoría y Etiquetas

Debajo del título de cada entrada de tu blog aparecen datos asociada a la entrada. Orbit muestra tres datos: el usuario que escribe la entrada, las categorías a las que pertenece y las etiquetas asociadas. Cada dato se puede Activar/Desactivar. Las siguiente imagen es una muestra de una entrada con todos los datos activados.

Doc Orbit 02 03 Entradas

Color de los Títulos y Subtítulos

En esta sección podemos cambiar el color de los títulos y subtítuos que se muestran en las entradas y resúmenes.

2.5 Redes sociales

En esta sección puedes poner los enlaces a tu RSS Feed y de las redes sociales.

Para acceder a esta sección debes ir a: Apariencia > Personalización > Redes Sociales

En este apartado se puede Tan sólo tienes que introducir la URL.

Actualmente Orbit puede configurar Twitter, Facebook, Google+, LinkedIn, Youtube y Vimeo. Los iconos aparecen en la parte superior derecha de la página.

Doc Orbit 02 04 Redes Sociales

2.6 Informe soporte

Si necesites ayuda para configurar tu plantilla Orbit puedes utilizar los foros de soporte o el formulario de contacto. En tu petición incluye la información que parece en este apartado. Así podré ayudarte con más facilidad.

3. Shortcodes

3.1 Instalación

Los shortcodes son pequeños fragmentos de códigos que puedes añadir en las páginas y entradas de tu web. Se usan para añadir funciones nuevas que no tiene el editor standard de WordPress.

Para utilizar los shortcodes necesitas intalar el plugin orb-plus, que puedes bajar en este enlace orb-plus

3.2 Botones

Hay tres botones: gris claro, gris oscuro y azul. Y dos tamaños para cada uno. Los parámetros son la url para introducir el enlace del botón, y size para el tamaño.

Los valores que podemos usar para size son short (pequeño) o long (grande). Ejemplos:

Botones pequeños

[orb-button-light url="#"] Bitado [/orb-button-light]
[orb-button-dark url="#"] Bitado [/orb-button-dark]
[orb-button-blue url="#"] Bitado [/orb-button-blue]

Doc Orbit 03 02 Button 01

Botones grandes

[orb-button-light url="#" size="long"] Bitado [/orb-button-light]
[orb-button-dark url="#" size="long"] Bitado [/orb-button-dark]
[orb-button-blue url="#" size="long"] Bitado [/orb-button-blue]   

Doc Orbit 03 02 Button 02

3.3 Avisos

Son parrafos con un aspecto visual marcado y diferente del resto. A la izquierda tienes el shortcode y a la derecha como se visualiza:

[orb-notice]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/orb-notice]

Doc Orbit 03 03 Warnning 01

[orb-error]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/orb-error]

Doc Orbit 03 03 Warnning 02

[orb-warning]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/orb-warning]

Doc Orbit 03 03 Warnning 03

[orb-info]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
[/orb-info]

Doc Orbit 03 03 Warnning 04

3.4 Columnas

Puedes crear columnas para tu contenido. Tienes tres formatos: de 2, de 3 y de 4 columnas. Para utilizarlos debes crear un shortcode fila y dentro de este, los shortcode columna. Es más fácil verlo con ejemplos que explicarlo. Primero vemos el shortcode y después el resultado.

2 Columnas

[orb-row]
  [orb-column21]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column21]
  [orb-column21-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column21-last]
[/orb-row] 

Columna 1 de 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Columna 2 de 2 (última)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

3 Columnas [1/3] [1/3] [1/3]

[orb-row]
  [orb-column31]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column31]
  [orb-column31]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column31]
  [orb-column31-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column31-last]
[/orb-row] 

3 Columnas [1/3] [2/3]

[orb-row]
  [orb-column31]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column31]
  [orb-column32-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column32-last]
[/orb-row] 

Columna 2/3 (última)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

3 Columnas [2/3] [1/3]

[orb-row]
  [orb-column32]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column32]
  [orb-column31-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column31-last]
[/orb-row] 

Columna 2/3
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

4 Columnas [1/4] [1/4] [1/4] [1/4]

[orb-row]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column41-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41-last]
[/orb-row] 

Columna 1 de 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Columna 2 de 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Columna 3 de 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Columna 4 de 4 (última)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

4 Columnas [1/4] [2/4] [1/4]

[orb-row]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column42]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column42]
  [orb-column41-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41-last]
[/orb-row] 

Columna 1/4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Columna 2/4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Columna 1/4 (última)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

4 Columnas [1/4] [1/4] [2/4]

[orb-row]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column41]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column42-last]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column42-last]
[/orb-row] 

Columna 1/4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Columna 1/4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Columna 2/4 (última)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

4 Columnas [1/4] [3/4]

[orb-row]
  [orb-column41]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column41]
  [orb-column43-last]
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  [/orb-column43-last]
[/orb-row]

Columna 1/4
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Columna 3/4 (última)
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

3.5 Listas

Listas con iconos personalizados. Este shorcode dispone de dos parámetros. icon y color

Ejemplo de uso en el editor visual

[orb-custom-list icon="icon-minus" color="red"]
  ● First thing
  ● Second thing
  ● Third thing
[/orb-custom-list]  

Ejemplo de uso en el editor sólo texto

[orb-custom-list icon="icon-ok" color="green"]
<ul>
   <li>First thing</li>
   <li>Second thing</li>
   <li>Third thing</li>
</ul>
[/orb-custom-list]  

Algunos ejemplos de listas:

Doc Orbit 03 05 List 01

Valores para el parámetro icon:

Doc Orbit 03 05 List 02

Valores para el parámetro color:

3.6 Contacto

Información de contacto para añadir en el lugar que quieras. Todos los parámetros de este shortcode son opcionales. En los parámetros googlemap, twitter, facebook y linkedin debemos introducir la url del servicio.

Un ejemplo

[orb-contact-info name="John Doe" phone="123-456-7890" email="name@gmail.com" address="123 Fake St" city="Wonderland" state="NY" zip="12345" googlemap="maps.google.es/example" twitter="twitter.com/bitadocom" facebook="www.facebook.com/example" googleplus="plus.google.com/example" linkedin="www.linkedin.com/example" iconcolor="blueDark"]

Doc Orbit 03 06 Contact 01

Para el parámetro iconcolor debemos usar uno de estos valores:

4. Avanzado

4.1 Action hooks

Los Action Hook son funciones que se colocan dentro de una plantilla y nos permiten insertar código personalizado, sin modificar el código original de la plantilla. Esta es la posición de los Hooks en la página de inicio:

Doc Orbit 04 01 Action Hooks

  • bit_main_container: Situada justo después de la etiqueta <body>
  • bit_main_container_end: Situada justo después de cerrar la etiqueta </div> <!-- end main-container -->
  • bit_header: Situada justo después de la etiqueta <div id="main-container">
  • bit_in_header: Situada justo después de la etiqueta <header id="top-header">
  • bit_header_end: Situada justo después de cerrar la etiqueta </header><!-- end of top-header -->
  • bit_content_container: Situada justo antes de abrir la etiqueta <div id="content_container">
  • bit_in_content_container: Situada justo después de la etiqueta <div id="content_container">
  • bit_content_container_end: Situada justo después de cerrar la etiqueta </div><!-- end content-container -->
  • bit_footer_credit: Situada justo después de la etiqueta <div class="footer-credit>
  • orbit_credit: Situada en los créditos de la plantilla. Si utilizas este hook sobrescribes los créditos originales Powered by Orbit & WordPress

En la versión 1.1.0 se han añadido nuevos hooks para la pagina de inicio:

Doc Orbit 04 01 Action Hooks 02

  • bit_slider: Situada justo después de la etiqueta <div id="front-slide">
  • bit_slider_end: Situada justo antes de cerrar la etiqueta </div> <!-- end front-slide -->
  • bit_front_boxes_start: Situada justo después de la etiqueta <div id="front-boxes">
  • bit_front_boxes_end: Situada justo antes de cerrar la etiqueta </div> <!-- end front-boxes -->

Y en la página de entradas para el blog también se han añadido los siguientes hooks:

Doc Orbit 04 01 Action Hooks 03

  • bit_sidebar_main: Situada justo después de la etiqueta <aside> (sidebar.php)
  • bit_sidebar_main_end: Situada justo antes de cerrar la etiqueta </aside> <!-- End aside main sidebar --> (sidebar.php)
  • bit_post_end: Situada justo antes de la etiqueta </article><!-- end post article -->
  • bit_excerpt_end: Situada justo antes de la etiqueta </article><!-- end excerpt article -->

Segunda sidebar (sidebar-two.php)

  • bit_sidebar_two: Situada justo después de la etiqueta <aside>
  • bit_sidebar_two_end: Situada justo después de la etiqueta </aside> <!-- End aside sidebar two -->

Sidebar de la página de inicio (sidebar-front.php)

  • bit_sidebar_front: Situada justo después de la etiqueta <aside class="sidebar-front">
  • bit_sidebar_front_end: Situada justo después de la etiqueta </aside> <!-- End aside sidebar front -->

4.2 Filter hooks

Algunas funciones del core de WordPress y de muchas plantillas, disponen de un “mecanismo” para cambiar su comportamiento sin modificar el código de esas funciones. Este “mecanismo” se llama Filter Hooks. Orbit tiene los siguientes filter hooks con ejemplos de uso:

  • orbit_flexslider_pages_args : Añade los slug de la páginas para cargar el fichero javascript flexslider. Es el encargado de crear el slider de la página de inicio.
function childorbit_flexslider_pages_args( $output ) {

    array_push( $output, 'prueba' );

    return $output;
}
add_filter( 'orbit_flexslider_pages_args', 'childorbit_flexslider_pages_args' );
  • orbit_custom_background_args : Cambia los parametros para el fondo personalizado de tu WordPress.
function childorbit_custom_background( $output ) {

    $output['default-image'] = get_template_directory_uri() . '/images/default-logo.png';

    return $output;
}
add_filter( 'orbit_custom_background_args', 'childorbit_custom_background' );
  • orbit_custom_header_args : Cambia los parametros para la cabecera personalizado de tu WordPress.
function childorbit_custom_header( $output ) {
    $output['default-image'] = '';
    $output['width'] = 280;
    $output['height'] = 150;  

    return $output;
}
add_filter( 'orbit_custom_header_args', 'childorbit_custom_header' );   
  • orbit_custom_menus_args : Añade más menús.
function childorbit_custom_menus( $output ) {

    $output['other-menu'] = 'Otro Menu';

    return $output;
}
add_filter( 'orbit_custom_menus_args', 'childorbit_custom_menus' );
  • orbit_render_breadcrumb : Modifica el breadcrumb
function childorbit_custom_breadcrumb( $output ) {
    if ( !is_front_page() ) {
        $output['content'] .= '<span style="float: right; margin-right: 24px;"><a href="#">Filter in breadcrumb</a></span>';
        $output['before'] .= '<p style="background:orange;">';
        $output['after'] .= '</p>';
    }
    return $output;
}
add_filter( 'orbit_render_breadcrumb', 'childorbit_custom_breadcrumb' );    
  • orbit_get_custom_setting : Modifica el número de imágenes en el slider de la página de inicio
function childorbit_add_image_slider( $orbit_gen ) {
     $orbit_gen['orbit_slide_images'] = 5;
     return $orbit_gen;
}
add_filter( 'orbit_get_custom_setting' , 'childorbit_add_image_slider' );
  • orbit_show_slider : No mostrar el slider de la página de inicio
function childorbit_off_slider(){
    return FALSE;
}
add_filter( 'orbit_show_slider' , 'childorbit_off_slider' );    
  • orbit_show_front_boxes : No mostrar las secciones 1,2 y 3 de la pagína de inicio
function childorbit_off_front_boxes(){
    return FALSE;
}
add_filter( 'orbit_show_front_boxes' , 'childorbit_off_front_boxes' );  

5. Tutoriales

5.1 Cambiar estilo

La plantilla Orbit tiene 3 estilos, naranja, verde y azul. Pero puedes crear un estilo que más te agrade o que se adapte a los colores corporativos de tu empresa.

Cada estilo de Orbit usa dos colores uno oscuro y otro claro dentro del mismo tono. Así el estilo Azul, usa el color oscuro #1d6497 y uno claro #5098cb. Utiliza una herramienta gráfica para seleccionar los dos colores que te interesan. Aquí tienes una herramienta on-line donde puedes hacerlo Color Scheme Designer 3

Ahora necesitas un editor de texto plano. Crea un documento nuevo y copia el siguiente código CSS.

#top-header {
  border-top: 6px solid #oscuro;
}

.top-header-without-breadcrumb {
  border-bottom: 4px solid #oscuro;
}

#main-footer {
  background-color: #oscuro;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#oscuro), color-stop(0.5, #oscuro), to(#claro));
  background-image: -webkit-linear-gradient(#oscuro, color-stop(0.5, #oscuro), #claro);
  background-image: -moz-linear-gradient(#oscuro, color-stop(#oscuro, 0.5), #claro);
}

article .edit-link a, .navigation .current, .breadcrumb p {
  background-color: #oscuro;
}

.breadcrumb p, #main-footer {
  border: 1px solid #oscuro;
}   

Reemplaza el texto #oscuro por tu color oscuro, por ejemplo #a60000. Y reemplaza el texto #claro por tu color claro, por ejemplo #ff0000

Ahora copiamos el código y lo pegamos en el campo CSS Personalizado que se encuentra en Apariencia > Personalización > General y guardamos los cambios.

Doc Orbit 05 01 Cambiar Estilo

5.2 Slider más imágenes

El slider de la pagina de inicio tiene tres imágenes. En este tutorial veremos como añadir hasta un máximo de 6.

Necesitamos crear un Child Theme. Un Child Theme una plantilla que hereda de otra plantilla, en este caso vamos a crear una que hereda de Orbit.

Necesitamos crear una carpeta llamada childorbit en la ruta de nuestro WordPress: /wp-content/themes/. Dentro de childorbit necesitamos dos archivos: style.css y functions.php

En style.css añadimos el siguiente código:

/*
   Theme Name: childorbit
   Theme URI: bitado.com/childorbit
   Description: Child Theme. Parent Theme Orbit
   Author: Pinto
   Author URI: bitado.com
   Template: orbit
   Version: 0.1
*/
@import url(../orbit/style.css);    

En functions.php añadimos este código:

<?php

add_filter( 'orbit_get_custom_setting' , 'childorbit_add_image_slider' );
function childorbit_add_image_slider( $orbit_gen ) {
     $orbit_gen['orbit_slide_images'] = 5;
     return $orbit_gen;
}
?>   

Cambia el 5 por el número de imágenes que quieras y activa el tema childorbit en Apariencia > Temas

Puedes bajar el código de aquí. (Coloca childorbit en la carpeta themes)

6. Faqs

6.1 ¿Cómo activar la página de inicio?

Si te aparece como página principal el listado con las entradas del blog y deseas que aparezca la página de inicio, sigue estos pasos:

Crea una página sin contenido, con un título “Inicio”

Crea otra página sin contenido, con el título “Blog”

En Ajustes > Lectura realiza la siguiente selección:

Doc Orbit 06 01 Faq Front Page

Si lo deseas puedes incluir “Inicio” y “Blog” en el menú.

6.2 ¿Qué tamaño de imagen tienen los slider?

Las imagenes deben tener un máximo de 500 px de ancho. Si usas una imagen de mayor tamaño, se reduce a 500 px (estarás ocupando más ancho de banda del necesario). Si usas una imagen de menor tamaño se ajustará a 500 px y se verá con peor calidad.

Para una mejor experiencia visual utiliza todas las imágenes con el mismo tamaño y con 500 píxeles de ancho.

6.3 ¿Como puedo tener más imágenes en el slider?

Hay tres imágenes, pero podemos añadir más hasta un máximo de 6. En este tutorial te explico como hacerlo.