Share
En este segundo artículo de nuestra serie de desarrollo de temas de Magento, estableceremos las bases de nuestro nuevo tema. Configuraremos la estructura básica de directorios de nuestro nuevo tema, lo heredaremos del tema Responsive predeterminado de Magento, colocaremos el CSS, JS e imágenes en las ubicaciones apropiadas y crearemos un nuevo archivo local.xml para nuestro nuevo tema para incluir estos CSS y archivos JS en el encabezado de nuestro sitio web. Entonces empecemos.
El primer paso para crear nuestro nuevo tema de Magento es configurar la estructura de carpetas, donde podemos colocar nuestros nuevos archivos de temas. Necesitamos colocar nuestros archivos de temas en dos ubicaciones:
Accentsconagua
aplicación / diseño / frontend carpeta, donde agregaremos nuestros archivos phtml y xmlpiel / frontend carpeta, donde agregaremos nuestros archivos de imagen relacionados con CSS, JS y temasAntes de comenzar a crear nuevos directorios dentro de los directorios mencionados anteriormente, es mejor decidir dos nombres que usaremos continuamente. El primero será el nombre de nuestro paquete, podría ser el nombre de su compañía, el nombre del autor del tema o cualquier otra cosa, y el segundo será el nombre del tema. Para este tutorial, usaremos 'tutsplus'como el nombre del paquete, y'vstyle'como el nombre del tema. Una vez que se decidan estos dos nombres, comencemos a crear las carpetas.
Primero, vamos a crear estas rutas en nuestra aplicación y carpeta de la piel:[Directorio de Magento] / app / design / frontend / package_name / theme_name / [Directorio de Magento] / skin / frontend / package_name / theme_name /
Que en nuestro caso se convertirá en: [Directorio de Magento] / app / design / frontend / tutsplus / vstyle / [Directorio de Magento] / skin / frontend / tutsplus / vstyle /
Una vez creadas estas carpetas, agreguemos estas cuatro carpetas en el aplicación / diseño / frontend / tutsplus / vstyle directorio:
Y estas cuatro carpetas en el piel / frontend / tutsplus / vstyle carpeta:
Activemos el tema ahora, para ver cómo se ven las cosas. Para eso, ve a Sistema> Configuraciones> Diseño, ingrese 'tutsplus' en el Nombre del paquete actual campo y 'vstyle' en el Modelo campo, y guardar. Ahora, actualice la página principal de nuestra tienda y verá que toda la página está desordenada. Esta bien; Lo haremos funcionar heredándolo del tema de respuesta predeterminado de Magento en el siguiente paso.
Antes de Magento 1.9, Magento no tenía una función de tema infantil. Solíamos confiar en el modelo de respaldo de Magento para usar el tema predeterminado de Magento para cuidar muchas características. Pero afortunadamente, ahora en la versión 1.9 de Magento, podemos hacer un tema secundario de cualquier tema y extender su apariencia y funcionalidad sin problemas..
En este tutorial, vamos a hacer que nuestro nuevo tema sea un tema secundario del tema RWD de Magento. Para eso simplemente tenemos que crear un nuevo archivo theme.xml en esta ubicación de carpeta: aplicación / diseño / frontend / tutsplus / vstyle / etc.
Pon este código en este archivo XML:
rwd / default
Ahora, actualice la página principal de su tienda Magento y verá un sitio completamente funcional.
La razón por la que el sitio ahora funciona perfectamente bien es que ahora hemos heredado nuestro nuevo tema del tema RWD. Eso significa que, al representar nuestro nuevo tema, si Magento no encuentra ningún archivo en este nuevo tema, buscará el tema de Magento RWD y, si lo encuentra allí, Magento lo utilizará.
Como nuestro nuevo tema aún no tiene ningún archivo, todos los archivos se recuperan del tema RWD de Magento, por lo que el aspecto actual de nuestro sitio es idéntico al tema RWD. Pero ahora tenemos la flexibilidad de editar estas apariencias al crear nuestros propios archivos de temas donde sea necesario, y el resto de los archivos se heredarán del tema de RWD..
Otra ventaja de usar este enfoque es que con la actualización de las versiones de Magento, el tema de Magento RWD también se actualiza con frecuencia. De esa manera, nuestro tema siempre tendrá un retroceso en el último tema de Magento para proporcionar soporte para las últimas funciones y correcciones de errores..
Ahora, comenzaremos a modificar este nuevo tema secundario que acabamos de crear. Para eso, comencemos copiando los archivos CSS, JS y de imagen de nuestro sitio HTML a esta ubicación en nuestra tienda Magento:
piel / frontend / tutsplus / vstyle /
Como se mencionó anteriormente, hemos creado tres carpetas en esta ubicación, a saber: js, imagenes, fuentes, y css. Coloque los archivos CSS, JS e imágenes en sus respectivas carpetas..
Simplemente colocando estos archivos CSS y JS no los incluirá en su sitio Magento. Para eso tenemos que agregarlos manualmente al bloque de encabezado de nuestro Magento HTML.
Para los fines de este tutorial, solo crearemos un archivo XML y colocaremos todos nuestros cambios en ese único archivo. Nombraremos ese archivo XML local.xml, ya que este archivo se representa al final de todos los demás archivos XML, y también reemplaza la funcionalidad de otros archivos XML. Crearemos este archivo en la ubicación de esta carpeta:
aplicación / diseño / frontend / tutsplus / vstyle / layout
Una vez creado este archivo, agregaremos el siguiente código en este archivo, para incluir los archivos CSS y JS en el encabezado de nuestro sitio web.
skin_js js / bootstrap.min.js skin_js js / jquery.carouFredSel-6.2.1-packed.js skin_js js / jquery.easing.1.3.js skin_js js / jquery.elevatezoom.js skin_js js / jquery.flexslider.js skin_js js / owl.carousel.js skin_js js / jquery.sequence-min.js skin_js js / script.min.js css / bootstrap.css css / bootstrapTheme.css css / font-awesome.min.css css / flexslider.css css / owl.carousel.css css / owl.theme.css css / sequence-looptheme.css css / style.css css / style8.css
Déjame explicarte el código anterior paso a paso. Bajo el diseño (lo que implica que este controlador está relacionado con el diseño) y el controlador predeterminado (ya que se usará para todos los casos predeterminados), creamos un nuevo bloque y lo referenciamos a "cabecera", lo que significa que estos cambios solo tendrán efecto en el Bloque 'cabeza'. A continuación, hemos utilizado dos métodos de acción para agregar archivos CSS y JS por separado. Para agregar archivos JS, hemos utilizado este código XML:
Y para incluir archivos CSS, hemos utilizado este código XML:
Para asegurarse de que estos archivos CSS y JS estén realmente incluidos en nuestro nuevo tema, actualice la página principal de la tienda y presione Control-U para comprobar el código fuente de la página. Aquí en la sección principal, donde debería ver los archivos CSS y JS recién agregados. Haga clic en cada uno de esos enlaces para asegurarse de que estén vinculados a los archivos adecuados y que no haya enlaces rotos..
Por ahora, con suerte, ya comenzarás a ver algunos cambios en la apariencia de tu sitio web. Acabamos de empezar a editar este tema. En el siguiente artículo de este curso, comenzaremos a editar los archivos phtml del encabezado, pie de página y algunas otras páginas de plantillas. Así es como se ve nuestro tema en esta etapa..
En la sección de comentarios a continuación, avísenos si puede seguir las instrucciones hasta ahora. Además, avísame si te ha gustado el artículo. Nos encantaría escuchar tus opiniones..
