criando um tema drupal 7 a partir do zero

Categorias

InspiraoProjetoDesenvolvimentoGrficosCSSWordPressSocial MediaArtigosBrindesKits de ferramentasEventos

Informaes

SobreContatoEscreva para nsAnuncie

Como criar um tema Drupal 7 a partir do zeroDesenvolvimento

Drupal um poderoso, personalizvel e fcil de trabalhar com sistema aberto de gerenciamento de contedo (CMS). Eletem uma prspera comunidade de usurios e desenvolvedores que esto melhorando constantemente o software para queele suporta os mais recentes tecnologias web. Bravo aos muitos desenvolvedores e usurios que tm trabalhado to duropara fazer Drupal o que hoje eo que ser no futuro.

Um dos princpios fundamentais do Drupal a partilha de informao colaborativa. Assim, a fim de torn-lo parte dacomunidade que ir lev-lo atravs da jornada de criao de um tema a partir do zero em Drupal 7.

Vamos mant-lo simples, criando um tema minimalista, a fim de lev-lo vontade com o conceito bsico de construir oseu prprio.

Como criar um tema Drupal

O que ns estaremos cobrindo neste tutorial:

Configurao bsica de arquivos e pastas de um tema personalizadoCriao de um mock-up em um editor de imagemConstruindo e denominar o temaCriando um controle deslizanteCabealhoRodapSobre ns pgina, blog e formulrio de contatoAdicionando botes de compartilhamento social

Suposies:

Um ambiente de desenvolvimento, foi criado com o Drupal 7 instalado. Este tutorial usa uma nova instalao doDrupal.HTML bsico e conhecimento CSS.Voc sabe como instalar e ativar o mdulo contribuiu .

Estrutura de pastas

Para comear, vamos comear a nossa configurao estrutura da pasta primeiro. Cada tema tem um nome. Iremos chamareste tema "Scratch".

Primeiro, ajuste a sua pasta de tema novo, como mostrado abaixo:

1. Crie uma pasta em / sites / all / themes chamado - "custom" - em seguida, abra a pasta2. Crie uma pasta em / sites / all / themes / personalizado chamado - "zero" - em seguida, abra a pasta

3. Agora crie dois arquivos denominados:1. scratch.info2. template.php

4. Crie trs pastas / sites / all / themes / custom / scratch - nome-los:1. CSS2. imagens3. templates

5. Abra a pasta de CSS e criar um arquivo chamado style.css e voltar para a pasta raiz6. V para a pasta de modelos e criar um arquivo chamado page.tpl.php

Agora voc tem todos os arquivos necessrios para criar o tema.

Criao de um mock-up

Antes de comear qualquer codificao, vamos criar um projeto mock-up com um programa editor de imagens vetoriais.Para este tutorial Inkscape foi utilizada, pois livre.

O tamanho da pgina foi criada para 1500px por 5000px apenas para obter algum espao para trabalhar.

Abaixo esto os mock-ups criados para o site:

2 imagens deslizante X1 x Homepage1 x Logo

Arquivo de configurao - scratch.info

Agora sabemos o que o site deve ser semelhante podemos comear a codificao. Em primeiro lugar, v para o arquivoscratch.info. Este arquivo tem todas as informaes que o Drupal precisa saber sobre o nosso tema.

Neste arquivo adicione o seguinte:

Deixe-me explicar que linha por linha:

1. O nome do tema.2. Descrio do tema.3. Qual a verso do Drupal este tema ir trabalhar.4. Esta linha diz Drupal que temos uma folha de estilo CSS e onde ele est localizado em nossa pasta do tema do zero.

Drupal ir incluir automaticamente esse arquivo em cada pgina um usurio visita quando este tema definido comoo tema padro.

5. Cada regio onde voc pode adicionar blocos para suas pginas. Tudo em um site Drupal vem em um bloco,mesmo o contedo da pgina principal.

Depois de ter a entrada desses detalhes, feche o arquivo de informaes e abrir o page.tpl.php arquivo localizado na pastade modelos de sua pasta tema do zero.

Drupal usa um sistema PHPTemplate que envia variveis para as pginas que voc deseja exibir. Para obter uma lista devariveis disponveis, consulte Drupal Api . Voc no tem que us-los todos, mas existem alguns importantes l. D umaolhada nas descries para aprender mais sobre o que eles fazem.

HTML Skeleton - page.tpl.php

Este arquivo onde todo o cdigo HTML viver. Ns no precisamos de mexer com a adio de cerca de e uma vez que j so atendidas pelo html.tpl.php arquivo no mdulo de sistema. Tudo o que precisa se preocupar com soos blocos de construo da prpria pgina.

Vamos adicionar o mnimo absoluto para obter a pgina para exibir os dados antes de adicionar mais do que isso. Adicione o seguinte cdigo para o page.tpl.php arquivo e salv-lo.

Nota: Voc deve salvar este como um .php arquivo.

Ativando o tema

Agora, hora de permitir que o tema. Entrar como administrador e clique no link Aparncia na barra de navegaosuperior e clique em "Ativar e definir padro" para o tema do risco.

123456789

name = zerodescription = Um modelo personalizado a partir do zero.core = 7.x stylesheets [all] [] = CSS / style.css regies [user_menu] = Menu de Utilizadorregies [main_menu] = Menu Principalregies [contedo] = contedo

1

Aps salvar, verifique se voc tem uma aba do navegador com a rea de administrao aberto, enquanto trabalhava em seutema (fazemos isso porque o tema no est completo e no vai ter um link para a rea de administrao para mant-loaberto em um navegador separado tab). Abra a pgina em uma nova aba. Como voc pode ver na imagem abaixo no hcontedo de primeira pgina para exibir, mas agora estamos prontos para comear a construir a pgina.

D uma olhada nas maquetes novamente. Vamos agora construir a barra preta na parte superior com o menu do usurionele.

Adicione o seguinte cdigo para page.tpl.php

12345678910

Adicione o seguinte cdigo para Style.css

O cdigo acima tem um pouquinho de lgica php, especificamente um caso e uma outra declarao, que usado paratestar se o usurio est conectado, a fim de mostrar as ligaes corretas. O menu de usurio j est configurado por padrono Drupal e agora precisamos definir o bloco de menu do usurio para mostrar-se em que faixa preta na parte superior.Tomar um olhar para os scratch.info arquivo que voc vai encontrar uma linha que l "as regies [user_menu] = Menu doUtilizador". Esta a seo que acabamos de adicionar ao modelo e onde o bloco de menu ir.

Na barra de navegao superior, clique Estrutura> Blocos e definir o bloco de menu do usurio para a Regio menu deutilizador e, em seguida, bateu salvar na parte inferior da pgina.

Agora, atualize a pgina para ver as alteraes. A barra preta junto com o menu de utilizador dever ser visvel, comomostrado na imagem abaixo.

Agora, adicione o seguinte CSS para posicionar os links direita.

Adicione o seguinte ao style.css

111213

123456789

body { margem : 0px ;} / * Seo de cabealho Black * /.black-header { height : 50px ; background-color : # 333 ;}

12345678910111213

/ * Menu do Utilizador * /.black-header h 2 , .scratch-main-menu h 2 { exibio : nenhum ;}.black-header ul, .scratch-main-menu ul { list-style-type : nenhum importante! ; margem : 0 ; preenchimento : 0 ; padding-top : 12px ; padding-right : 30px ; flutuar : direito ;}.black-header li, .scratch-main-menu li {

Atualize a pgina e voc ver que os links j foram posicionados para a direita, como mostrado abaixo.

Adicionando um logotipo e do menu principal

Com isso completa, vamos comear a trabalhar no logotipo e no menu principal, sendo que ambos vo em uma seo decabealho. Primeiro salve o seu logotipo na pasta da imagem / sites / all / themes / personalizados / scratch /imagens do tema do zero. Agora clique em Aparncia> Configuraes e desmarque a caixa que diz "Usar o logotipopadro" e defina o "Caminho para o logotipo personalizado" campo para sites / all / themes / personalizados /scratch / imagens / scratch_logo.png e bateu salvar.

Agora ns podemos adicionar o cdigo correspondente para exibir o logotipo eo menu principal.

Adicione o seguinte ao page.tpl.php

Adicione o seguinte ao style.css

Depois de aplicar o cdigo, voc precisa habilitar o bloco para aparecer na seo do menu principal do site. Lembre-se, nscriamos essa seo no arquivo scratch.info.

1415161718192021222324

exibio : em linha ;}.scratch-user-menu { width : 960px ; margin-left : auto ; margin-right : auto ;}.scratch-user menu .menu a: link { color : #FFF ; text-decoration : nenhum ;} .scratch-user-menu .menu a: visited { color : #FFF ; text-decoration : nenhum ;} .scratch-user menu .menu a: hover { color : #FFF ; text-decoration : underline ;} .scratch-user-menu .menu a: active { color : #FFF ; text-decoration : nenhum ;}

123456789101112

Atualize a pgina e agora voc vai ser capaz de ver o logotipo como mostrado abaixo.

Agora precisamos adicionar mais um pouco de CSS para posicionar corretamente o logotipo eo menu principal.


123456789101112131415161718192021

/ * Menu Principal * /.scratch-main-menu { flutuar : direito ;}.scratch-main-menu h 2 { exibio : nenhum ;}.scratch-main-menu ul { list-style-type : nenhum importante! ; margem : 0 ; preenchimento : 0 ; padding-top : 40px ; padding-right : 30px ;}.scratch-main-menu li { exibio : em linha ;}.scratch-main-menu .menu a: link { color : # 4d4d4d ; text-decoration : nenhum ;}.scratch-main-menu .menu a: visited { color : # 4d4d4d ; text-decoration : nenhum ;}.scratch-main-menu .menu a: hover { color : # 4d4d4d ; text-decoration : underline ;}.scratch-main-menu .menu a: active { color : # 4d4d4d ; text-decoration : nenhum ;}

O cabealho est agora completa com o logotipo menu principal e posicionado bem como mostrado na imagem acima.

Criando seo de contedo principal

Agora precisamos criar a principal seo de contedo que consiste no ttulo e contedo. O controle deslizante ser apenaspara a primeira pgina e vamos chegar a isso, uma vez que temos construdo o modelo. Aqui est o cdigo para a seo decontedo principal.



Criando o rodap

Tudo o que resta a fazer criar o rodap com os seus dados de direitos autorais.


1234567891011121314151617

12345678910

/ * O contedo principal * /-.scratch-content-container div { width : 960px ; margin-left : auto ; margin-right : auto ;}/ * Trilha * /#breadcrumb { margin-top : 15px ;}

12345

E cpia ; 2013 zero. Todos os direitos reservados.


Agora vamos ter concludo todo o cdigo. Muito fcil, certo? Abaixo est uma cpia de todo o cdigo que as verses finaisde page.tpl.php e Style.css deve conter. Certifique-se de que voc no perdeu nada.

File - page.tpl.php

File - style.css

6

12345678

/ * Rodap * /.scratch-footer { width : 960px ; margin-left : auto ; margin-right : auto ; cor : # 4d4d4d ; text-align : center ;}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869

body { margem : 0px ;}/ * Seo de cabealho Black * /.black-header { height : 50px ; background-color : # 333 ;}/ * Menu do Utilizador * /.black-header h 2 { exibio : nenhum ;}.black-header ul { list-style-type : nenhum importante! ; margem : 0 ; preenchimento : 0 ; padding-top : 12px ; padding-right : 30px ; flutuar : direito ;}.black-header li { exibio : em linha ;}.scratch-user-menu { width : 960px ; margin-left : auto ; margin-right : auto ;}.scratch-user menu .menu a: link { color : #FFF ; text-decoration : nenhum ;} .scratch-user-menu .menu a: visited { color : #FFF ; text-decoration : nenhum ;} .scratch-user menu .menu a: hover { color : #FFF ; text-decoration : underline ;} .scratch-user-menu .menu a: active { color : #FFF ; text-decoration : nenhum ;} / * Seo de cabealho * /.scratch-header { width : 960px ; height : 100px ; margin-left : auto ; margin-right : auto ;}/ * Logo * /.logo-div { flutuar : esquerda ;}/ * Menu Principal * /.scratch-main-menu { flutuar : direito ;}.scratch-main-menu h 2 { exibio : nenhum ;}.scratch-main-menu ul { list-style-type : nenhum importante! ; margem : 0 ; preenchimento : 0 ; padding-top : 40px ; padding-right : 30px ;}.scratch-main-menu li { exibio : em linha ;}.scratch-main-menu .menu a: link { color : # 4d4d4d ; text-decoration : nenhum ;}.scratch-main-menu .menu a: visited { color : # 4d4d4d ; text-decoration : nenhum ;}.scratch-main-menu .menu a: hover { color : # 4d4d4d ; text-decoration : underline ;}.scratch-main-menu .menu a: active { color : # 4d4d4d ; text-decoration : nenhum ;} / * O contedo principal * /-.scratch-content-container div { width : 960px ;

Configurando a pgina inicial

Vamos configurar uma pgina real para os visitantes. Na barra de navegao superior clique em Contedo> Adicionarcontedo> pgina Basic. Definir o ttulo para "Scratch - como se fosse feito por" e, em seguida, colar algum texto fictciocomo lorem ipsum e salve a pgina. Anote a URL depois de salvar. No meu caso node / 1.

Na barra de navegao superior v para Configurao> Sistema> Informaes do site e definir "Default pgina" paraqualquer que seja a URL . Eu meu set de node / 1.

Hit salvar e ir para a pgina inicial do site. Voc agora tem uma pgina como a mostrada na imagem abaixo.

707172737475767778798081828384

margin-left : auto ; margin-right : auto ;}/ * Trilha * /#breadcrumb { margin-top : 15px ;}/ * Rodap * /.scratch-footer { width : 960px ; margin-left : auto ; margin-right : auto ; cor : # 4d4d4d ; text-align : center ;}

Adicionando um controle deslizante

Estamos quase terminando com o tema, mas nenhum site estaria completa sem um controle deslizante ento vamosadicionar um. Este tema utiliza um mdulo chamado Slideshow Creator. Os mdulos so o equivalente a plugins que vocencontraria em WordPress. Aqui um timo tutorial sobre como instalar e ativar o mdulo contribuiu . Instalar e ativar oSlideshow Creator eo jQuery Plugin mdulo que depende.

Em seguida, v para Configuraes> Contedo de autoria> formatos de texto> Adicionar formato de texto. O nome de"slideshow" e marque a opo "Converter linha de quebra em HTML" e caixas "Slideshow Creator" e salve.

Em seguida preciso copiar e colar as duas imagens da apresentao de slides para o site.

Crie uma pasta em / sites / default / files denominados "slideshow" e, em seguida, ir para essa pasta e colar as duasimagens da apresentao de slides.

Em seguida, clique no link Contedo na barra de navegao superior e editar a pgina. Cole o seguinte na parte superior docorpo e alterar o formato de texto para apresentao de slides e, em seguida, salv-lo.

[Slideshow: 2, height = 245, width = 960, layout = nenhum, dir = | slideshow | sim |||||]

Nota: Este cdigo diz ao mdulo de slideshow onde colocar o slideshow. Por favor, consulte a documentao do mdulopara mais informaes sobre como ajustar essas configuraes.

Isso coloca o slideshow nesta pgina no topo do contedo e define a altura e parmetros de largura. O layout = nenhum usado para que no links de navegao so mostradas para o slideshow. Outras opes para o layout so parte superior ouinferior. O dir = | slideshow | sim ||||| diz o slideshow onde as imagens so mantidos. Observe o nome da pasta que usamos

foi slideshow eo "sim" diz-lhe para usar todas as imagens na pasta.

Salve e atualize a pgina. Ele agora deve ser semelhante a este.

Configurando o formulrio sobre ns pgina, blog e contato

Podemos agora configurar o blog, pgina About Us, e do formulrio de contato.

Blog

Para isso, clique no link Mdulos na barra de navegao superior e ativar o mdulo de blog. Ento v para a Estrutura>Menus> Navegao e clicar em links da lista e marque a caixa para permitir "Blogs". Agora clique no link "editar" e defina

o "elo pai" para o menu principal e salvar.

Agora voc deve ser capaz de adicionar o blog para o menu principal. Ir para estruturar> Menus> Menu principal e cliquenos links da lista. Agora permitir que o "blog" e salve a configurao. Voc agora tem uma configurao blog e pronto parair.

Quem Somos Pgina

Navegue at Contedo na barra de navegao superior e, em seguida, clique no boto Adicionar contedo> Pgina Basic.

Nomeie-o sobre ns e jogar um pouco de texto no corpo.

Em seguida, clique na caixa que diz "Fornecer um link do menu" e certifique-se o item "pai" est definido para o menuprincipal, coloque Quem Somos como o ttulo do link Menu, clique em configuraes de caminho de URL e definir o URLalias para cerca-nos .

Formulrio de Contato

Navegue para Mdulos e ativar o mdulo Contact. Ir para estruturar> Menus> Navegao e clicar em links da lista emarque a caixa de seleo para ativar "Contacto". Clique no link "editar" e defina o "elo pai" para o menu principal eclique em salvar. Agora v para estruturar> Menus> Menu principal e clique nos links da lista e ativar o menu "Contato" esalvar a configurao. Seu formulrio de contato est agora configurado. Voc pode editar as configuraes de formulrio

de contato, indo para estruturar> formulrio de contato.

Nota: Se o seu formulrio de contato no aparece no menu principal, em seguida, voc deve verificar se voc configurouas permisses corretamente. Para fazer isso, clique Povo ligao na barra de navegao superior e, em seguida, na guiapermisses. Voc vai precisar para se certificar de que voc tem a "utilizao do formulrio de contato do site" marcadapara o usurio annimo.

Adicionando botes de mdia social

A nica coisa que resta adicionar alguns botes de redes sociais para o site. Este tema utiliza o Mdulo Sharebar . V emfrente e instalar esse mdulo e habilit-lo e, em seguida, v para Configuraes> Sharebar> Configurar Sharebar e cliqueem Opes de Exibio e desmarque a caixa "sharebar exibio do contedo." A "Sharebar Position" tambm foi para adireita.

Salvar e, em seguida, atualizar a pgina. O tema j est concludo.

Concluso

Este tutorial mostra como fazer um tema Drupal 7 a partir do zero. Agora voc deve ser capaz de editar e modificar o temaacrescentando ainda mais cores e elementos para atender s suas necessidades. Boa sorte e se divertir.

Grandes graas a Ray James que ajudaram na criao deste tutorial.

criando um tema drupal 7 a partir do zero

Documents