Cómo desarrollar un tema personalizado de Tumblr
Como diseñador y desarrollador web autónomo, me he acostumbrado a trabajar en un orden específico de principio a fin en el sitio web de un cliente típico. Mi flujo de trabajo típico comienza con la programación / creación de bocetos que luego conduce al desarrollo y revisiones, todo con un contacto constante con el cliente en el camino.
Cuando me preguntaron sobre el desarrollo para Tumblr, mi mente inicialmente se quedó en blanco. Tumblr en ese momento era algo que nunca supe ni entendía por qué alguien querría usarlo. No tenía ni idea de lo personalizable que era realmente hasta que indagué más profundamente.
El propósito de esta publicación es compartir algunas ideas sobre Tumblr y cómo puede usarlo de manera efectiva para sus propios proyectos futuros.
Beneficios clave
Los verdaderos beneficios de Tumblr se encuentran dentro de la sección de blogs de cada sitio. El único concepto que me llamó la atención fue el alojamiento GRATUITO para su tema. Hay pasos para hacer que esto funcione, pero una vez que los lleva a cabo, todo lo que necesita es el nombre de dominio y está dorado.
Se aplican las mismas reglas cuando se trata de desarrollar un sitio web tradicional con tumblr, pero cualquier inclusión, como archivos CSS o JavaScript, debe tener URL absolutas (más sobre esto en un momento).
Empezando
Para comenzar, primero debe crear una cuenta de Tumblr. Configure uno y luego navegue al área de configuración después de iniciar sesión. Para cada cliente, normalmente configuraré dos blogs de Tumblr o usaré mi propio Tumblr de prueba y crearé un blog protegido con contraseña para el desarrollo y la visualización antes de que el sitio entre en funcionamiento. Para el propósito de esta demostración, he incluido el diseño de blog más reciente de mi banda (la música estará disponible próximamente :)). Dentro de la barra lateral ves mi prueba blog y luego el blog principal con el Tumblr de la banda.
Quizás se pregunte por qué creé dos blogs. Bien a proteger con contraseña un blog o hazlo privado necesitas tener un base blog en su lugar en Tumblr, que hice aquí para hacerlo. Más adelante, puede desactivar esta función y mantener la sitename.tumblr.com extensión o cambiarlo a una URL directa como la mía. También puede omitir este paso si no le preocupa lanzar el sitio solo una vez que esté completamente desarrollado.
Para crear un blog privado, haga clic en el Crea un nuevo blog enlace dentro de la barra lateral y accederá a la página siguiente. Asegúrate que Intimidad tick está seleccionado y listo.
Avanzando
Ahora pasamos al meollo de Tumblr: una vez que hayas diseñado y finalizado tu sitio, es el momento de pasar a cortarlo en rodajas y en cubos para optimizarlo para Tumblr. Hay dos tipos de operadores para representar contenido en su HTML existente. Necesitará tener un shell HTML básico construido al iniciar un tema personalizado.
Algunos términos clave y líneas útiles:
- Variables: se utilizan para insertar datos dinámicos como el título o la descripción de su blog.
- Bloques: se utilizan para representar HTML o establecer datos como un enlace anterior o una publicación de blog.
Hay una lista completa de los diferentes tipos de variables y bloques que puede asignar a su HTML aquí. En lugar de copiar el sitio, le recomiendo encarecidamente que visite esta página y se familiarice con ella. Sería mejor incluso hacer esto antes de comenzar su diseño. Hay muchas funciones disponibles para cualquier tema de Tumblr que se pueden usar o no dentro de su propio diseño. El sitio de mi banda es un sitio básico. Necesitaba un lugar al que la gente pudiera ir para averiguar más y ver lo que siempre estamos haciendo y eso es todo.
Querrá tener un plan para todo tipo de publicaciones que estén disponibles dentro de Tumblr. Codifíquelos y modifíquelos correctamente para cada blog que cree y, por supuesto, consulte la documentación para incluir otros elementos que son esenciales como navegación, paginación, metadatos, reenvíos, comentarios (notas), etc.
- {block: Posts} Este es un envoltorio o tipo para cualquier publicación. {/ block: Posts}
- {block: Text} Para publicaciones basadas en texto {/ block: Text}
- {block: Photo} Para publicaciones de fotos {/ block: Photo}
- {bloque: conjunto de fotos} Para publicaciones de fotos en forma de galería {/ block: Photoset}
- {block: Quote} Para cotizaciones {/ block: Quote}
- {block: Link} Para enlaces {/ block: Link}
- {block: Audio} Para publicaciones de audio {/ block: Audio}
- {block: Video} Para publicaciones de video {/ block: Video}
Entonces, ¿dónde pongo mi código?
Para importar su HTML recién pulido a su tema personalizado, deberá iniciar sesión y seleccionar el blog apropiado en la barra lateral izquierda dentro del Ajustes sección del tablero. Busque el título titulado Tema y haga clic en el Personalizar botón.
Una vez que haga clic en el botón, aparecerá una nueva página con algunas opciones de edición personalizadas para su sitio. A continuación puede ver cómo se ve actualmente mi sitio terminado con contenido ficticio de Tumblr. Esta área es excelente para ver actualizaciones de cualquier cambio que realice dentro del editor de código de Tumblr, pero realmente recomiendo desarrollar el sitio utilizando un editor de código básico y un navegador desde el principio. Una vez que el código está en su lugar, puede insertar las variables personalizadas basadas en Tumblr y los elementos de bloque dentro del HTML. Luego, simplemente copie y pegue sus cambios en cada página personalizada de Tumblr.
Para editar el HTML, haga clic en el Editar HTML (sí, es así de fácil) y aparece una nueva ventana lateral. Verá algo de HTML con cualquier tema base que esté personalizando. Elimine o modifique ese código para que coincida con su propio estilo y diseño y luego haga clic en Actualización de Vista previa para ver la actualización de la página a su derecha. Una cosa que no puedo enfatizar lo suficiente es usar URL absolutas para alojar sus imágenes, CSS, JavaScript y todo lo que incluya, ya que no se vincularán correctamente dentro de Tumblr si no lo hace. Sucede que tengo alojamiento para mi propio sitio web, así que acabo de crear un directorio para vincular las imágenes e incluye. Con la misma facilidad, podría utilizar un servicio de alojamiento de archivos o imágenes de forma gratuita. Solo haría eso si está completamente seguro de que los enlaces no caerán y dejarán su sitio web sin estilos o imágenes, etc.
¿Y si quiero más páginas?
Fácil. Después de hacer clic en el Editar HTML botón como mencioné anteriormente, desplácese hacia abajo hasta la sección de páginas de la barra lateral de la izquierda que aparece. Aquí verá el ejemplo que he proporcionado con páginas adicionales del sitio web de mi banda. Puede arrastrar el orden de ellos y editarlos individualmente.
Simplemente haga clic en el + Agregar una página enlace para crear otro. Con cada nueva página, deberá actualizar el contenido y la navegación si, por ejemplo, tiene estados activos que cambian a través de CSS. Esto debería ser una obviedad si ha trabajado con HTML y CSS antes. De lo contrario, debe consultar los numerosos tutoriales y publicaciones sobre este tema en este sitio.
Una cosa a tener en cuenta es que cuando haces clic editar al lado de una página existente, verá aparecer una nueva ventana del navegador como se muestra a continuación. Asegúrese de tener el diseño personalizado activo en el menú desplegable mientras crea un diseño personalizado para cada página. Existe la opción de utilizar un diseño estándar y hacer que un enlace de navegación redirija a otro.
Características avanzadas
Además de crear sus propios estilos CSS y documentos HTML, tiene la posibilidad de utilizar algunas de las funciones avanzadas de Tumblr, que se incluyen con cada blog. Justo debajo del Paginas sección verá una Avanzado sección con algunas opciones disponibles.
La mayoría de ellos se explican por sí mismos. Si su sitio no tiene un diseño optimizado para dispositivos móviles como el mío, entonces activaría el utilizar diseño móvil optimizado opción. Las URL descriptivas hacen que el enlace permanente a cualquier publicación sea mucho más identificable. Finalmente, si está en un apuro, puede insertar un CSS personalizado debajo de eso, pero es igual de fácil incluir su propio CSS a través de un enlace absoluto.
No quiero la extensión .tumblr
La gente de Tumblr lo hizo fácil. Todo lo que se requiere es que seas el propietario del nombre de dominio al que intentas redirigir tu blog de Tumblr.
Para perder la extensión, deberá navegar al área de configuración de su panel de control. Desde allí, seleccione Utilice un nombre de dominio personalizado dentro de la sección de URL. Ingrese el dominio apropiado que ha registrado y luego asegúrese de probar su dominio haciendo clic en el botón azul que le devuelve la mirada. Una vez que lo haga, deberá actualizar el Un registro de su proveedor de dominio actual para apuntar a Tumblr, que es 66.6.44.4. Las instrucciones completas sobre cómo hacer esto son disponible aquí.
Para resumir
Usar Tumblr es una excelente opción para cualquier persona interesada en mantener un blog activo o incluso en desarrollar un sitio web completo.
Construí el sitio de ejemplo que has visto a lo largo de este tutorial desde cero. El sitio web se diseñó por primera vez dentro de Photoshop. Una vez que decidí el estilo y la apariencia, comencé a traducir el diseño estático en una experiencia interactiva muy parecida a un sitio web similar, pero luego agregué las variables y los bloques necesarios para que Tumblr funcionara como un paso adicional, pero fácil. A partir de ahí lo optimicé para que quepa en dispositivos móviles y el resto es historia.
Hay muchas más personalizaciones disponibles, como incorporar Google Analytics, opciones personalizables que se pueden activar y desactivar desde el panel de configuración, la conexión a otras aplicaciones como Instagram, Facebook y más, pero el proceso en general fue muy fácil y muy recomendado para todos interesado en una nueva forma de alojar un sitio web basado en blogs.
Este tutorial está destinado a ser una descripción general muy amplia de cómo comenzar a desarrollar sitios web con Tumblr. Para obtener más información y una mejor comprensión, lea el documentación completa proporcionada por Tumblr.
¿Has construido un proyecto en torno a Tumblr? ¿Qué consejos agregarías? Háznoslo saber en los comentarios.
