Breaking

Post Top Ad

Your Ad Spot

lunes, 18 de marzo de 2019

Crea un tema personalizado de Drupal desde cero.

Este tutorial te ayuda a crear el tema personalizado de Drupal 7. Siguiendo nuestro tutorial paso a paso, podrá crear su propio tema de Drupal. También hemos creado un tema sensible a Drupal simple basado en nuestro tutorial de creación de temas personalizados de Drupal. Al final del tutorial, puede descargar el tema personalizado de Drupal 7 y le ayudará mucho a crear su propio tema de Drupal.
Comencemos con el tema personalizado de creación de temas de Drupal 7.

Paso 1) Crear un directorio de temas:

Cree un directorio con el nombre del tema ( mytheme/) en el sites/all/themes/directorio.

Paso 2) Logo y captura de pantalla:

Inserte la imagen screenshot.png y logo.png en el mytheme/directorio.
  •  screenshot.png se usa para mostrar la vista de la pantalla del tema en la página de lista de temas en el panel de administración.
  •  logo.png se utiliza para mostrar el logotipo del sitio.

Paso 3) Crea el archivo .info:

Cree un .infoarchivo en el mytheme/directorio y este nombre de archivo debe ser el nombre del directorio del tema con .infoextensión (por ejemplo mytheme.info).
  •  El .infoarchivo es un archivo de texto estático para definir y configurar un tema.
  •  Cada línea en el .infoarchivo es un par clave-valor con la clave a la izquierda y el valor a la derecha, con un "signo igual" entre ellos (por ejemplo name = mytheme). Los puntos y coma se utilizan para comentar una línea.
  •  Algunas teclas utilizan una sintaxis especial con corchetes para crear una lista de valores asociados, denominada "matriz".
Defina los siguientes contenidos (par clave-valor) en el mytheme.infoarchivo.
Información básica:
nombre = MyTheme
Descripción = MyTheme es una costumbre Drupal 7 Theme por < un  href = "https://www.codexworld.com"  target = "_blank" > CodexWorld </ a > < br > Para cualquier apoyo en relación con este tema, por favor envía un correo electrónico en info@codexworld.com
versión = 1.0
core = 7.x
motor = phptemplate
Regiones:
Las regiones de bloques disponibles con el tema se definen mediante la especificación de la tecla de 'regiones' seguido de la “máquina” interno nombre legible entre corchetes y el nombre legible por humanos como el valor, por ejemplo, regions[theRegion] = The region name
En Drupal 7, las siguientes regiones se asumen por defecto.
regiones [encabezado] = encabezado
regiones [resaltado] = resaltado
regiones [ayuda] = ayuda
regiones [contenido] = contenido
regions [sidebar_first] = barra lateral izquierda
regions [sidebar_second] = Barra lateral derecha
regiones [pie de página] = pie de página
regions [page_top] = Principio de página
regions [page_bottom] = Parte inferior de la página
También puede agregar sus regiones personalizadas como la siguiente.
regiones [control deslizante] = control deslizante
Características:
Al usar “características” podemos habilitar o deshabilitar la visualización de ciertos elementos de la página. Las "características" de control de teclas se muestran en la página de configuración del tema como casillas de verificación. Puede localizar estos ajustes en Administer > Appearance > Settings > MyTheme.
En Drupal 7, las siguientes funciones se agregan de forma predeterminada.
características [] = logo
características [] = nombre
características [] = eslogan
características [] = node_user_picture
características [] = comment_user_picture
características [] = comentario_usuario_verificación
características [] = favicon
características [] = main_menu
características [] = secundario_menu
Puede agregar sus características personalizadas como la siguiente.
características [] = control deslizante
Configuración del tema:
puede usar la configuración del tema para configurar las funciones de manera predeterminada marcada o no en su tema. Las configuraciones se definen como las siguientes:
configuración [toggle_ "feature"] = 1 para verificar la configuración
configuración [toggle_ "feature"] = 0 para desmarcar la configuración
Los ajustes predeterminados de Drupal 7 son:
ajustes [toggle_logo] = 1
configuraciones [toggle_name] = 1
configuraciones [toggle_slogan] = 1
configuraciones [toggle_node_user_picture] = 1
configuraciones [toggle_comment_user_picture] = 1
configuraciones [toggle_comment_user_verification] = 1
configuraciones [toggle_favicon] = 1
configuraciones [toggle_main_menu] = 1
configuraciones [toggle_secondary_menu] = 1
Puede agregar su configuración personalizada como la siguiente.
configuraciones [toggle_slider] = 1
También puede establecer el valor predeterminado en la configuración.
configuraciones [contact_phone] = 8888888888
configuraciones [contact_email] = contact@codexworld.com
En cualquiera de los archivos PHP de su tema, puede recuperar el valor de la configuración llamando a:
<? php $ contact_phone  theme_get_setting ( 'contact_phone' ); ?> 
<? php $ contact_email  theme_get_setting ( 'contact_email' ); ?>
Hojas de estilo:
especifique los archivos css de su tema, también puede agregar hojas de estilo adicionales llamando drupal_add_css()al template.phparchivo.
hojas de estilo [todos] [] = css / style.css
hojas de estilo [todos] [] = css / bootstrap.min.css
Scripts:
especifique los archivos JavaScript para incluir en su tema.
scripts [] = js / jquery.js
scripts [] = js / bootstrap.min.js
El archivo .info de nuestro tema de demostración drupal personalizado se verá como el siguiente.
nombre = CodexWorld
Descripción = CodexWorld es un tema de Drupal 7 personalizada por < un  href = "http://www.codexworld.com"  target = "_blank" > codexworld.com </ a > < br > Para cualquier apoyo en relación con este tema, por favor envíe un correo electrónico a contact@codexworld.com
versión = 1.0
core = 7.x
motor = phptemplate

; Regiones
regiones [encabezado] = encabezado
regiones [resaltado] = resaltado
regiones [ayuda] = ayuda
regiones [control deslizante] = control deslizante
regiones [contenido] = contenido
regions [sidebar_first] = barra lateral izquierda
regions [sidebar_second] = Barra lateral derecha
regiones [pie de página] = pie de página

; Caracteristicas
características [] = logo
características [] = nombre
características [] = eslogan
características [] = favicon
características [] = main_menu
características [] = secundario_menu

; Ajustes
configuraciones [slider_display] = 1
configuraciones [slider_image_one] = sites / all / themes / codexworld / images / slider-image.png
configuraciones [slider_image_two] = sites / all / themes / codexworld / images / slider-image.png
configuraciones [slider_image_three] = sites / all / themes / codexworld / images / slider-image.png
configuraciones [contact_phone] = 8888888888
configuraciones [contact_email] = contact@codexworld.com

; Hojas de estilo
hojas de estilo [todos] [] = css / style.css
hojas de estilo [todos] [] = css / bootstrap.min.css

; Guiones
scripts [] = js / jquery.js
scripts [] = js / bootstrap.min.js

Paso 4) Archivos de plantilla (.tpl.php):

Estos archivos de plantillas se utilizan para el (x) marcado HTML. Algunos de los archivos de plantillas comunes son
html.tpl.php
page.tpl.php
region.tpl.php
block.tpl.php
node.tpl.php
comentario-wrapper.tpl.php
comment.tpl.php
Cree el template/directorio en el mythemedirectorio e inserte todos los archivos de plantilla en este directorio.
html.tpl.php archivo se verá como el siguiente.
<! DOCTYPE html>
< html  lang = "en" >

< head >
     <? php print  $ head ; ?> 
    < título > <? php print  $ head_title ; ?> </ title >
     <? php print  $ styles ; ?> 
    <? php print  $ scripts ; ?> 
</ head >

< body  class = " <? php print  $ classes ;?> "  <? php print  $ attributes ;? >>
     <? php print  $ page_top ; ?> 
    <? php print  $ page ; ?> 
    <? php print  $ page_bottom ; ?> 
</ body >

</ html >
En page.tpl.php(usar para todas las páginas) / page—front.tpl.php(usar solo para la primera página) para uso de la habilidad del logotipo $logo, título del sitio drupal_get_title(), uso de valor de las variables de configuración del tema theme_get_setting('variable_name')e imprimir el uso de regiones<?php print render($page['region_name']); ?>

Paso 5) Archivo template.php:

La lógica condicional, el procesamiento de datos de la salida, las funciones personalizadas, las funciones de tema que prevalecen o cualquier otra personalización de la salida en bruto se deben hacer aquí.

Paso 6) Configuración de tema adicional:

Si desea crear una sección de configuración personalizada, debe modificar el formulario de configuración específica del tema. Cree un theme-settings.phparchivo en su directorio de temas y modifique la configuración específica del tema para que se convierta en la hook_form_system_theme_settings_alter()función. La página de configuración del tema personalizado de Drupal desea lo siguiente.
<? php / ** 
Configuración de tema adicional 
* / function  codexworld_form_system_theme_settings_alter (& $ form , & $ form_state ) { 
    $ form [ 'codexworld_settings' ] = array ( 
        '#type'  =>  'fieldset' , 
        '#title'  =>  t ( 'Configuración del tema de CodexWorld' ), 
        '#collapsible'  =>  Falso , 
        '#collapsed'  =>  Falso , 
    ); 
    $ form [ 'codexworld_settings' ] [ 'contact_info'
        =>  'fieldset' , 
        '#title'  =>  t ( 'Información de contacto' ), 
        '#collapsible'  =>  Verdadero , 
        '#collapsed'  =>  Verdadero , 
    ); 
    $ form [ 'codexworld_settings' ] [ 'contact_info' ] [ 'contact_email' ] = array ( 
        '#type'  =>  'textfield' , 
        '#title'  =>  t ( 'Contact email' ), 
        '#default_value'  => 
        =>  t ( "Ingrese el correo electrónico de contacto." ), 
    ); 
    $ form [ 'codexworld_settings' ] [ 'contact_info' ] [ 'contact_phone' ] = array ( 
        '#type'  =>  'textfield' , 
        '#title'  =>  t ( 'Contact Phone' ), 
        '#default_value'  =>  theme_get_setting ( 'contact_phone' ), 
        '#description'    =>  t ( "Ingrese el número de teléfono de contacto." ), 
    ); 
}

Paso 7) Habilita tu tema:

Inicie sesión en el panel de administración. Vaya a admin/appearance/y haga clic en el enlace Habilitar y establecer por defecto bajo su tema recién creado en la sección TEMAS DESHABILITADOS .

Paso 8) Añadir contenido:

Cree bloques con el contenido respectivo y asigne los bloques con las regiones respectivas o vaya a la página de lista de bloques y asigne las regiones respectivas desde aquí.
 Los pasos anteriores son suficientes para crear un tema personalizado de Drupal.

Tema Demo - CodexWorld

Basados ​​en este tutorial, hemos creado un tema personalizado de Drupal llamado CodexWorld . Puede descargar este tema desde el siguiente enlace Descargar código fuente .
Después de descargar el extracto de Codexworld tema en el sites/all/themes/directorio. Vaya a admin/appearance/y active el tema CodexWorld .
Ahora siga los pasos a continuación para importar el contenido de la demostración.
  •  Crear bloques:
    ve a admin/structure/block/y realiza los siguientes pasos.
    •  Contenido de la barra lateral izquierda: haga clic en el enlace "Agregar bloque". Ingrese la "Descripción del bloque", "Cuerpo del bloque", elija "HTML completo" en "Formato de texto" y elija la región "Barra lateral izquierda" en el tema "Mundo de Codex" de la sección "CONFIGURACIÓN DE LA REGIÓN". Puede encontrar el contenido del cuerpo del bloque en el codexworld/blocks/sidebar-content.htmlarchivo.
    •  Contenido del control deslizante del encabezado: este contenido de bloque tiene algo de código PHP, por lo que primero debe habilitar el módulo “Filtro PHP” en la sección Módulos. Haga clic en el enlace "Agregar bloque". Ingrese la “Descripción del bloque”, “Cuerpo del bloque”, elija “Código PHP” en “Formato de texto” y elija la región “Barra lateral izquierda” en el tema “Mundo de Codex” en la sección CONFIGURACIÓN DE LA REGIÓN. Puede encontrar el contenido del bloque en el codexworld/blocks/slider.phparchivo.
  •  Contenido de la página principal:
    vaya al admin/content/enlace "Agregar contenido" y haga clic en él. Ingrese el "Título", "Cuerpo", elija "HTML completo" en "Formato de texto", ingrese el alias de la URL (página de inicio) en la sección "Configuración de la ruta de la URL", seleccione la opción "cerrado" en la sección "Configuración de comentarios" y Salvar. Puede encontrar el contenido del cuerpo en el codexworld/blocks/homepage-content.htmlarchivo.
Navegue hasta el Configuration > SYSTEM > Site informationVaya a la sección PÁGINA FRONTAL e ingrese el alias de la URL de la página de inicio (página de inicio) en el campo "Página de inicio predeterminada" y guarde la configuración.
 ¡Bien hecho! Demo Drupal tema de instalación y configuración se ha completado con éxito. Ahora puedes consultar el tema personalizado de Drupal en tu página de inicio.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas