¿Sabías que todos los días se conectan 50,000 nuevos sitios de WordPress? ¿Cómo vas a destacar entre la multitud en un océano de tantos sitios diferentes? Un método seguro para llamar la atención de inmediato puede ser crear su propio tema personalizado, único y convertido de PSD a WordPress. Esto se diseñaría específicamente para su propio sitio, ¡y su sitio no será uno de los miles de sitios que funcionan como un cortador de cookies!
Hay tres estándares al diseñar un tema de sitio web. PSD (archivos de Photoshop), WordPress (WP) y, recientemente, estos últimos años, Twitter Bootstrap, un marco para desarrollar sitios receptivos que los profesionales de la industria están utilizando en estos días.
En esta publicación, le brindaremos una guía completa y fácil sobre cómo combinar los tres: cómo convertir un PSD en un tema de WordPress (Bootstrap), en 5 sencillos pasos.
Más adelante en este artículo, encontrará plantillas, listas para descargar, para que las use como base para este tutorial. En caso de que desee ver otros artículos, visite otras partes de nuestro sitio, con tutoriales y artículos detallados.
Pero, ¿por qué querría convertir un archivo PSD en un tema de Bootstrap WordPress?
¿Qué es un PSD?
PSD es la abreviatura de PhotoSsalto Design.
Esto se debe a que Photoshop es la única pieza de software más popular entre los diseñadores gráficos y la forma en que se crean la mayoría de los diseños de sitios web de WordPress. Con Photoshop, un diseñador creará un diseño de sitio web único para usted. Esto se guardará como un archivo de diseño de Photoshop o un archivo PSD. Este diseño se puede entregar a los desarrolladores de WordPress que lo convertirán en un tema.
¿Qué es PSD para WordPress?
PSD a WordPress es el proceso de convertir un archivo de diseño de Photoshop en un tema de trabajo de WordPress utilizando Bootstrap u otras metodologías y marcos. En pocas palabras, proporciona un diseño personalizado y se convierte en un tema de WordPress completamente funcional.
La mayoría de las personas que han estado en o alrededor de la industria del diseño y el diseño web pueden comprender fácilmente esta terminología, al igual que entenderían cualquier otro término de diseño que no sea familiar para las personas fuera del nicho (kerning, CMYK, padding, typography, lead, Serif, etc.)
¿Qué es un tema de WordPress?
Hay dos aspectos principales en la creación de un sitio web de WordPress normalmente.
- El aspecto real del sitio web y
- el contenido del sitio.
En WP, el CMS más popular para crear un sitio, el aspecto del sitio web es independiente del contenido. Puede cambiar la apariencia de su WordPress por completo mientras conserva todo el contenido.
Esto se debe a que el aspecto del sitio web en realidad está definido por un tema de WordPress.
Piense en temas como lo haría para teléfonos inteligentes, para su computadora de escritorio o portátil o cualquier otra cosa que se pueda "cambiar" según sus preferencias. La plantilla o el tema que utilice se puede utilizar para "revestir" el contenido o darle la apariencia que está eligiendo.
Los temas de WordPress son una colección de archivos PHP que contienen "comandos" o especificaciones que definen los colores y patrones, los estilos, los iconos, las fuentes, los tamaños de los encabezados y el texto, los botones y esencialmente el aspecto completo de todos los elementos del sitio web que está diseñando.
Hay toda una industria en torno a estos diseños, donde puede obtener su plantilla de forma gratuita o comprar una que ya está hecha (generalmente llamada premium), por entre $ 25 y unos pocos cientos de dólares.
También existe la opción de crear su propio diseño personalizado, en lugar de optar por un producto popular que ya ha sido creado (y utilizado muchas veces antes). Este es el proceso real de convertir un PSD en un tema de WordPress (cómo se verá su sitio web al final).
En el futuro, lo guiaremos al procedimiento exacto para crear su propio diseño.
Conversión de un tema PSD a WordPress
Hemos desglosado el proceso de convertir un PSD a WordPress en 5 pasos importantes:
1. Cortar el archivo PSD
En términos de nuestro tutorial de PSD a Bootstrap, "Slicing" es lo primero y más importante en todo el proceso de conversión de PSD a WordPress receptivo.
El término "Rebanar" Puede parecerle bastante confuso al principio, pero no se preocupe demasiado por ello. Rebanar se refiere a cortar y dividir un solo archivo de imagen en varios archivos de imagen, cada uno de los cuales contiene diferentes elementos de diseño de todo el diseño. Algunas personas se refieren a ellos como empalmes porque están creando elementos separados de un único "organismo" de diseño que eventualmente será reorganizado o sintetizado y transformado en un diseño completo.
Esto es crucial ya que no puede codificar una plantilla / tema desde un solo archivo de diseño de imagen.
Por lo tanto, para diseñar una página web, primero es necesario dividir el archivo de imagen principal en muchos archivos de imagen individuales y luego unirlos sin problemas.
Por lo general, la mayoría de los diseñadores gráficos y web prefieren utilizar Adobe Photoshop para cortar.
Aunque se puede hacer lo mismo con un software de edición de imágenes equivalente como GIMP (Programa de manipulación de imágenes GNU) o cualquier otro paquete de software de imágenes, le recomendamos encarecidamente que utilice Photoshop ya que hace el trabajo más fácil y rápido, con herramientas como Capas y Máscaras de Capa, extrayendo Metadatos, mezclando, manipulando y usando archivos PSD e imágenes RAW.
Independientemente del software / aplicación que utilice, el punto principal es crear archivos de imagen con píxeles perfectos al final, que representen los diferentes elementos de su diseño final.
Además de eso, no necesita cortar los elementos de diseño, como el color del encabezado / pie de página y el fondo de color sólido, en su totalidad, que se pueden crear dinámicamente. En su lugar, solo corte elementos de diseño, como botones e imágenes, que no se puedan crear de forma dinámica.
Encuentre a continuación un video de YouTube que explica los conceptos básicos de la división de archivos PSD:
2. Inicia tu tema
Una vez que haya cortado el archivo de diseño de imagen, vaya a https://getbootstrap.com e descargar esta versión de Twitter Bootstrap desde allí. Después de completar la descarga, extraiga el archivo zip en una carpeta.
Ahora, si abre la carpeta extraída, encontrará tres carpetas: css, fuentes e js - dentro de eso.
Tenga en cuenta que uno de los usos principales de este marco es porque hace un uso extensivo de consultas de medios para poder crear diseños que funcionen en cualquier tipo de dispositivo, permitiendo que su diseño fluya sin problemas entre un tamaño de dispositivo a otro (xs - Extra pequeño, para móviles, sm - Pequeño, para tabletas, md - Mediano, para portátiles y computadoras de escritorio y lg - Grande, para computadoras de escritorio grandes).
Esto se llama diseño web adaptable.
Lectura adicional: Frameworks CSS o CSS Grid: ¿Qué debo usar para mi proyecto? (Revista Smashing)
3. Cree archivos Index.html y Style.css
El siguiente paso es codificar los elementos cortados en formato HTML / XHTML y diseñarlos usando CSS. Para esto, necesita crear un index.html y style.css archivo, que requiere que tenga suficiente dominio sobre HTML CSS. Básicamente, estamos convirtiendo el PSD a HTML, antes de que podamos continuar con los siguientes pasos.
Aparte: HTML o XHTML representa (EXsensible) HyperText MArkupe Language, mientras que CSS representa Cascendiendo StyleShola.
Dado que desea desarrollar su tema usando Bootstrap, tendrá que inicializar Bootstrap en la sección principal y el asociado JavaScript en la sección del cuerpo de tu index.html página de la siguiente manera:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="/es/css/bootstrap.min.css" rel="stylesheet" media="screen"></head><body><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="/js/bootstrap.min.js"></script></body></html>
Ahora puedes hacer uso de Componentes de Bootstrap en su plantilla HTML. Por ejemplo, aquí estamos creando una página web simple con un menú de navegación y componentes en miniatura.
La parte .min.js de las bibliotecas de arranque, significa que el archivo ha sido minificado por razones de rendimiento:
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="/es/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head><body><div class="container-fluid"><div class="navbar"><a class="navbar-brand" href="#">WPBootstrap.com</a><ul class="nav navbar-nav pull-right"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Order</a></li><li><a href="#">Contact</a></li></ul></div><div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="/image1.png"> <div class="caption"> <h3>About</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Explore</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="/image2.png"> <div class="caption"> <h3>Projects</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Explore</a></p> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="/image3.png"> <div class="caption"> <h3>Services</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Explore</a></p> </div> </div> </div><hr><footer><p>© WPBootstrap 2015</p></footer></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="/js/bootstrap.min.js"></script></body></html>
Si abre este archivo en su navegador, debería verse así:
Como puede ver, actualmente no funciona ningún CSS personalizado en esta página. Entonces, para diseñar el contenido de la página html de acuerdo con nuestros requisitos, crearemos un style.css expediente. Para nuestro ejemplo, hemos agregado el siguiente código a mi archivo CSS personalizado:
.barra de navegación {
fondo: # 222222;
Margin-bottom: 0px;
radio del borde: 0px;
}
.navbar-marca {
color: # FFFFFF;
line-height: 50px;
relleno-izquierda: 10px;
}
a.navbar-brand: hover {
color: # FFEB3B;
}
.barra de navegación ul {
padding-right: 4%;
}
.barra de navegación ul li a {
color: # FFFFFF;
margen derecho: 10%;
}
.navbar ul li a: hover {
Color: #222222;
color de fondo: amarillo;
}
a.btn-primary {
color de fondo: # E91E63;
color: # FFFFFF;
}
Para que nuestro archivo CSS personalizado recién creado funcione, debemos incluirlo en nuestra página HTML (al igual que hicimos bootstrap.min.css). Por lo tanto, incluya un enlace de referencia al style.css archivo en su index.html archivo, justo encima de la línea donde hizo referencia bootstrap.min.css.
Meditative Healing™
...
...
Ahora abierto index.html en su navegador nuevamente y verá el cambio: nuestro CSS personalizado está funcionando ahora, puede ver la barra de encabezado en la parte superior y los botones con un color diferente al de los botones de arranque predeterminados.
Todos los cambios se han definido a través del archivo CSS anterior.
Este fue solo un ejemplo simple.
Del mismo modo, al hacer uso de Bootstrap, puede codificar todo su archivo PSD (por supuesto, después de cortarlo) en HTML. Al final de este paso, tendrá dos archivos en la mano:
- index.html y otro es
- style.css.
Hasta ahora estábamos principalmente en un tutorial de PSD a Bootstrap. Ahora viene la conversión a un tema de Bootstrap WordPress.
¿Lo anterior es demasiado trabajo para ti? ¿Prefieres no empezar de cero? ¡Tenemos una solución para eso!
Este paquete de plantillas de inicio de WordPress lo ayudará a comenzar con una serie de temas de inicio que puede usar para producir eventualmente su propio diseño personalizado.
Descargue el paquete de 20 temas de WordPress para principiantes ahora
Como puede ver, la conversión de PSD a HTML es una parte bastante importante de todo el proceso, pero cuando lo tiene fuera del camino, las cosas se vuelven un poco más fáciles.
4. Cree la estructura del tema de WordPress en index.html
La razón principal para convertir un archivo de diseño de Photoshop a WordPress es crear una plantilla de sitio web completamente funcional que pueda cargarse en el panel del sitio web.
Temas como Divi e Avada y otros temas populares tienen un conjunto estándar de archivos que deben implementarse para ser considerados un tema WP válido. Eso es lo que haremos en nuestro próximo paso.
Leer más: Elementor Pro vs Divi: ¿cuál es mejor?
Realmente, las próximas fases de esta conversión giran en torno a la estructura de codificación de WordPress para temas y plantillas porque ahora estamos llevando nuestro tema hacia WP.
Ahora que tienes el index.html archivo de su PSD, debe dividirlo en múltiples php archivos de acuerdo con la estructura de archivos de temas de WordPress. Al hacerlo, no solo podrá convertir la estática index.html a un tema WP dinámico, pero también puede agregarle varias características y funciones asociadas con WordPress.
(Aparte, PHP es un lenguaje de programación del lado del servidor conocido como preprocesador de hipertexto).
Para facilitar la programación de temas de WordPress y para buenas prácticas de codificación, una plantilla típica se compone de varios archivos PHP como encabezado.php, pie de página.php, index.php, barra lateral.php, búsqueda.php y así sucesivamente.
Sin embargo, solo necesita index.php e style.css archivos para crear un tema de WordPress completamente funcional.
Como un ejemplo aproximado, aquí estamos rompiendo nuestro anterior creado index.html archivo en tres archivos: header.php, index.php y footer.php.
Comencemos con header.php. El código HTML completo que se incluye en la parte superior de index.html la página entrará en la header.php archivo.
Meditative Healing™
WPBootstrap.com
Hogar
Sobre
Servicios
Orden
Contacto
</div>
Mientras que la parte central del archivo index.html irá al archivo index.php:
Sobre
...
Explorar
</div>
</div>
</div>
Proyectos
...
Explorar
</div>
</div>
</div>
Servicios
...
Explorar
</div>
</div>
</div>
Y nuestro archivo footer.php se vería así:
© WPBootstrap 2015
</div>
Este paso incluye dividir el archivo index.html en encabezado.php, index.php, pie de página.php y otros archivos de características necesarios de acuerdo con la estructura de archivos de temas de WordPress.
La lista completa de archivos que debe tener cada plantilla se puede encontrar a continuación. También puede ver una imagen que muestra cómo se relacionan entre sí:
- style.css
- header.php
- index.php
- sidebar.php
- footer.php
- single.php
- page.php
- comments.php
- 404.php
- functions.php
- archive.php
- searchform.php
- search.php
Si sigue alguna guía para convertir su diseño de Photoshop a WordPress, siempre encontrará que dan como resultado una estructura similar a la siguiente. A continuación, se muestra una vista más detallada de cómo debería verse un tema final de WordPress:
5. Agregue etiquetas de WordPress a la plantilla
Este es el paso final de nuestro tutorial.
Lo mejor de WordPress es que ofrece una gran cantidad de funciones integradas en su estructura de codificación que se pueden usar para agregar funciones y características personalizadas al tema de un sitio web.
Para incluir cualquiera de estas funciones en su tema de WordPress, todo lo que necesita hacer es usar el conjunto correcto de etiquetas de función integradas en sus archivos. El framework de WordPress se encargará de todo. ¡Esto es lo que hace que la plataforma sea tan poderosa!
En el paso anterior, rompimos el index.html archivo sobre la base de la estructura de archivo requerida.
Ahora es el momento de agregar etiquetas PHP de WordPress a varios archivos de tema, como encabezado.php, index.php, pie de página.php e sidebar.php etc, que tenemos en el paso anterior. Finalmente, los combinamos para producir un tema de WordPress altamente funcional.
Para nuestro ejemplo anterior, aquí hemos utilizado el funcionar en header.php para mostrar el título de nuestro sitio en un enlace:
Y para el menú, usamos el funcionan de la siguiente manera:
'Project Nav', 'menu_class', 'nav navbar-nav pull-right')); ?>
Ahora, nuestro archivo header.php se verá así:
?>
class = "no-js">
">
Meditative Healing™
>
'Project Nav', 'menu_class', 'nav navbar-nav pull-right')); ?>
</div>
El código de pie de página para nuestro footer.php seguirá siendo el mismo excepto agregar función.
© WPBootstrap 2015
</div>
Ahora pasemos al index.php. Para mostrar nuestros componentes de miniaturas, hemos utilizado el función.
get_header (); ?>
Mientras avanzamos, ¡esto todavía no es todo! Para mostrar correctamente los componentes de nuestra miniatura, necesitamos definir barra lateral-1, barra lateral-2 e barra lateral-3 en nuestro functions.php archivo de la siguiente manera:
function wpbootstrap_widgets_init () {
register_sidebar (matriz (
'name' => __ ('Área de widget', 'wpbootstrap'),
'id' => 'barra lateral-1',
'description' => __ ('Agrega widgets aquí para que aparezcan en tu barra lateral.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar (matriz (
'name' => __ ('Área de widget', 'wpbootstrap'),
'id' => 'barra lateral-2',
'description' => __ ('Agrega widgets aquí para que aparezcan en tu barra lateral.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
register_sidebar (matriz (
'name' => __ ('Área de widget', 'wpbootstrap'),
'id' => 'barra lateral-3',
'description' => __ ('Agrega widgets aquí para que aparezcan en tu barra lateral.', 'wpbootstrap'),
'before_widget' => ' ',
'after_widget' => ' ',
'before_title' => ' ',
'after_title' => ' ',
)
);
}
add_action ('widgets_init', 'wpbootstrap_widgets_init');
Esto registrará tres áreas de widgets en el panel de WordPress, donde tendríamos que poner el "Código HTML"Para cada componente de miniatura en barra lateral-1, barra lateral-2 e barra lateral-3 widgets respectivamente. Por ejemplo, usaremos el siguiente código en barra lateral-1 Widget
Sobre
...
Explorar
</div>
</div>
</div>
¡Y así!
Lo último que debemos hacer es cargar nuestras hojas de estilo. Esto se puede hacer usando wp enqueue style () en el function.php archivo, de la siguiente manera.
// Cargar la hoja de estilo principal
wp_enqueue_style ('' estilo wpbootstrap ', get_stylesheet_uri ());
// Cargar hoja de estilo Bootstrap
wp_enqueue_style ('wpbootstrap', get_template_directory_uri (). '/css/bootstrap.css');
Para obtener una lista completa de todas las etiquetas y funciones disponibles, le recomendamos que consulte estas páginas oficiales del Codex:
- Etiquetas de plantilla: Esta página le proporciona una lista completa de etiquetas de WordPress, cada una de las cuales tiene una página dedicada donde puede encontrar más información sobre una etiqueta en particular.
- Referencia de funciones: Esta página es una guía de referencia para todas las funciones de PHP utilizadas en el software de WordPress. Al igual que las etiquetas de plantilla, cada función de PHP está vinculada a una página dedicada donde se explica en detalle con ejemplos apropiados.
Después de agregar las etiquetas y funciones esenciales de WordPress, todos estos archivos se colocarán en una sola carpeta con un nombre similar al del tema. Debes colocar esta carpeta en / Wp-content / themes / directorio de instalación de su sitio web.
¡Y ese es el paso final del tutorial!
Una vez que haya hecho eso, debería tener un tema de WordPress totalmente funcional con Bootstrap que puede activar a través del panel de WordPress.
¿Listo para empezar?
Servicios de conversión de PSD a WordPress
Antes de continuar leyendo, ¿está buscando desarrolladores o socios que lo ayuden con el proyecto de su sitio web? ¿Está buscando un proveedor confiable de servicios de conversión de PSD a WordPress?
Estás en la posición poco envidiable de tener que encontrar un buen socio confiable, sin que te engañen, o perder mucho tiempo (y dinero) con un proveedor de servicios de baja calidad.
Nuestra experiencia en la búsqueda de desarrolladores de confianza no ha sido agradable.
Hemos tenido que lidiar con varios problemas importantes:
- Desarrolladores que devuelven código de muy baja calidad
- Personas que se comunicaron de forma muy esporádica, creando importantes problemas de comunicación.
- Código que fue plagiado al 100%, lo que nos generó problemas legales.
- Tarifas caras, con una calidad que, en el mejor de los casos, era mediocre.
- Desarrolladores que desaparecieron (o nunca supimos de los siguientes depósitos)
Pero no dejes que esto te asuste de la subcontratación, solo necesitas encontrar un de confianza empresa, ¡y estamos aquí para ayudar!
Dado que hemos estado en el negocio por más de 15 años, hemos construido una red de proveedores a quienes conocemos y en quienes confiamos cuando se trata de WordPress y servicios de desarrollo web. Estos son proveedores totalmente subcontratados que pueden trabajar con usted en base a proyectos.
¿Quieres saber más? Eche un vistazo a las siguientes opciones cuando se trata de la conversión confiable de PSD a WordPress:
1. PSDtoWPService.com
Mirza y su equipo se han ganado una excelente reputación por trabajar con WordPress, crear temas personalizados y serían una excelente opción de socio para ese trabajo. Nos gusta este servicio de PSD a WordPress porque es barato y confiable. Pueden convertir archivos PSD a temas de WordPress o cualquier otro tipo de desarrollo de WordPress.
Ubicación costa afuera: Bangladesh
Tarifa por hora: $ 25 / hora
2. Codificable
Codeable ofrece un concepto diferente.
En lugar de deslocalizar directamente, Codeable es un mercado compuesto exclusivamente por programadores de WordPress, donde los autónomos deben pasar por un riguroso proceso de investigación para llegar al mercado.
Su algoritmo de precios le ofrece un precio justo para eliminar tanto la subvaloración como la sobrevaloración. Compruébelos si desea obtener varias opciones antes de decidir qué servicio de conversión de PSD a WordPress elegir.
Lugar: En todo el mundo, tú decides con quién prefieres trabajar
Tarifa por hora: $ 70 a $ 120 / hora
3. WPKraken
WPKraken es un equipo de desarrollo web que tiene una calificación de 4.98 de 5 estrellas y ha trabajado con grandes clientes corporativos a su nombre, como Lexus y Suzuki, y puede realizar cualquier tipo de trabajo basado en WordPress.
Tienen un equipo interno experimentado de desarrolladores, diseñadores de UI y UX, PM y QA. Pueden trabajar tanto en pequeñas correcciones como en pequeños proyectos, así como en proyectos personalizados a gran escala.
No importa qué tipo de tarea tenga, ¡ellos pueden manejarla como debe hacerse!
WP Kraken ofrece un precio justo por servicios de alta calidad. Puede contactarlos a través de su portal. wpkraken.io
Lugar: Polonia
Tarifa por hora: $ 50 / hora
¿Aún no estás interesado en contratar desarrolladores? ¡Sigue leyendo!
Algunas reflexiones adicionales
De forma lenta pero segura, el diseño web receptivo se ha convertido en un estándar dominante para la creación de sitios web preparados para el futuro.
En estos días, casi todos los sitios web funcionan con esta increíble técnica para brindar a los usuarios una experiencia de visualización e interacción óptima, independientemente del dispositivo que estén usando, ya sea un teléfono, tableta o computadora portátil / dispositivo de escritorio.
Según una encuesta reciente realizada por el equipo de webmasters de Google en Google+, más del 81% de las personas prefieren utilizar un enfoque de diseño receptivo para que sus sitios web se muestren correctamente en todo tipo de dispositivos.
Es por eso que es esencial aprender a crear un tema de sitio web de WordPress usando Twitter Bootstrap u otro marco receptivo para su diseño web desde un PSD. Si bien hay muchos temas de sitios web gratuitos, crear su propio tema de WordPress personalizado con Bootstrap es la máxima expresión de creatividad en el diseño web.
Aunque WordPress domina más del 24% de todos los sitios web, convertir un archivo de Photoshop (PSD) en un tema receptivo que funcione bien no es tan fácil como cree. Esto requiere que tenga un buen control sobre la escritura de consultas de medios CSS que, en última instancia, dictan si una plantilla responde o no.
¿No sería mejor si obtiene una hoja de estilo adaptable precodificada con todas las funciones esenciales?
Gracias a Bootstrap, el marco front-end receptivo más popular del mundo, para facilitar la vida de los desarrolladores, ahora es una tarea bastante más simple de lo que solía ser. En este artículo, le mostraremos cómo convertir una plantilla PSD en un tema adaptable de WordPress usando Bootstrap como su marco de desarrollo.
Una vez más, primero convertimos nuestro PSD a Bootstrap, así que esencialmente, la primera parte es realmente un tutorial de PSD a Bootstrap.
Más tarde, en la segunda parte, los archivos que desarrollamos se convierten en un tema de WordPress, por lo que en ese punto, todo se convierte en un tutorial de PSD a Bootstrap.
Como siempre, nos gusta facilitarle la vida ofreciéndole un montón de cosas que le ayudarán a empezar. Una vez que haya aprendido los conceptos básicos de la creación de un tema de WordPress, ¿por qué no comenzar con uno de los temas de inicio de WordPress?
Descargue nuestro paquete de 20 WP Starter Theme
Consejo esencial superior:
Crear un gran diseño de sitio web requiere un conjunto de habilidades bastante avanzadas. Aunque escribirlo usted mismo puede parecer la mejor opción, contratar a un gran desarrollador de WordPress (por ejemplo, de Toptal) probablemente sea mucho más rentable a largo plazo. En esencia, obtendrá un gran resultado en muy poco tiempo.
Echa un vistazo a los desarrolladores en Toptal ahora
Preguntas frecuentes
¿Qué es un archivo PSD?
Un archivo PSD es un archivo de diseño de Photoshop que contiene un diseño creado por el software de diseño de Adobe: Photoshop. En el contexto de este artículo, el PSD contendrá el diseño de un sitio web. Este archivo PSD se puede enviar a los desarrolladores para que lo creen como un tema de WordPress. El archivo de diseño contendrá toda la información necesaria para crear el diseño final de un sitio web en HTML, incluidos elementos como colores, cuadrículas, cómo se verá en el escritorio / dispositivo móvil y otros elementos de diseño necesarios.
¿Qué significa PSD a WordPress?
PSD a WordPress es el proceso que crea un tema para WordPress a partir de un concepto de diseño creado en Photoshop. Por lo general, se contrata a un diseñador para crear un concepto de diseño de sitio web, en función de cómo el usuario final querría que se viera el sitio web. Una vez que el diseño se ha creado en Photoshop, debe convertirse a un código compatible con WordPress. Esto significa que un desarrollador web utilizará el diseño del sitio web creado en Photoshop y creará un tema de WordPress que recreará el diseño.
¿Cómo abro un archivo PSD en Photoshop?
El PSD es el formato de archivo nativo de Photoshop, por lo que abrir un archivo PSD en Photoshop debería ser trivial. Lo único que debe tener en cuenta es que ciertos elementos necesarios, como las fuentes utilizadas para crear el diseño, deben estar disponibles en la computadora donde se abre el archivo, de lo contrario, el diseño no contendrá las fuentes correctas.
¿Qué es un tema de WordPress?
Un tema de WordPress es una colección de archivos PHP que contienen "comandos" o especificaciones que definen y crean los colores y patrones, los estilos, los iconos, las fuentes, los tamaños de los encabezados y el texto, los botones y esencialmente todo el aspecto de todos. de los elementos del sitio web que se está diseñando. Un tema de WordPress es dinámico en el sentido de que el diseño puede funcionar con cualquier tipo de contenido, ya sea un blog, una tienda de comercio electrónico, un curso en línea o cualquier otra cosa para la que se esté utilizando el sitio específico de WordPress.
¿Cómo convierto una plantilla Bootstrap a WordPress?
Para convertir una plantilla Bootstrap a WordPress, un desarrollador web debe tomar la plantilla Bootstrap y copiar el diseño en un tema esqueleto de WordPress. En realidad, lo que se está haciendo es que los diseños reales se estén convirtiendo a un lenguaje que el marco de WordPress pueda comprender y con el que pueda trabajar. Puede seguir nuestras instrucciones anteriores o contratar a uno de nuestros proveedores de servicios de conversión mencionados anteriormente.
Reflexiones finales
Eso es todo por ahora sobre cómo crear un tema de WordPress Bootstrap receptivo a partir de un archivo PSD. Ya sea que sea un novato o un profesional, este tutorial de PSD a Bootstrap y luego a WP seguramente le proporcionará la forma más simplificada de lograr el resultado deseado.
Sin embargo, si tiene algún tipo de problema en el proceso de conversión de PSD a WordPress, hay dos cosas que puede hacer. Usted puede contrata a un desarrollador web en Toptal, donde tienen el 3% de los mejores talentos en todo el mundo, por lo que no tiene que preocuparse por la calidad. Alternativamente, puede contratar a un desarrollador profesional de WordPress.
¿Dinos qué piensas? ¿Necesita más detalles en alguna parte específica de este tutorial / guía? Nos encantaría que esta guía te sea útil, ¡así que ayúdanos a ayudarte!
Por favor, deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!
Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.
y muchos más ...