Informações sobre temas para o FlatPress CMS

Informações diversas sobre temas para o FlatPress CMS

Alterar um tema

Para instalar navegue até a pasta do flatpress fp-interface->themes e descompacte o arquivo. Abra o site no painel de controle, acesse o menu Temas e clique no tema desejado, em seguida, você pode selecionar um outro estilo.

Temas disponíveis

No site oficial há poucos temas interessantes, e os que funcionam estão com design de blogs antigos, e que portanto, não são responsivos.

Um ponto positivo do CMS é que além do tema do blog, é possível personalizar o tema do painel de administração e inserir múltiplos estilos.

Compatíveis com v1.2.1: 23, Avelion, Azure, Bearggero*, BitterSweet, Black Minimalism, Blue Bayou, Dark, Deckay 4.0, Dilectio, Disciple, Emerald, Esh, FlatRead*, Flat Misty Look*, FPAleksandr, FPSkeleton* , Gray*, Grey Matter*, Hemingway*, Insel Fixed Header*, IMobile, Inove*, IoVetro, iTyp, Leggero v2 plus, Leggero3c+1, Ligero, Mini Simple*, Nautica22 Liquid, NHWS Scalable*, Ornate*, Pastels*, PivotX*, Quaderno, Simpla Flex*, Simple Wood*, Snail , Soul Vision, , A Touch of Glass* , Webfi, Windows, Xubox, e o tema que não está listado no wiki: RamblingRoss.

* coloque o mouse no asterisco para ver o comentário relacionado

Estrutura da pasta fp-interface

	

	fp-interface/												<-- Contém a camada de apresentação, temas e traduções
	
				lang/
					cs-cz/	
					en-us/
					...
					pt-br/
						 lang.admin.config.php
						 lang.admin.entry.php
						 lang.admin.main.php
						 lang.admin.maintain.php
						 lang.admin.php
						 lang.admin.plugin.php
						 lang.admin.static.php
						 lang.admin.themes.php
						 lang.admin.uploader.php
						 lang.admin.widgets.php
						 lang.comments.php
						 lang.comments.php
						 lang.contact.php
						 lang.default.php
	
				sharedtpl/
						 atom.tpl
						 commentadminctrls.tpl
						 comment-atom.tpl
						 comment-form.tpl
						 commentmail.tpl
						 comment-rss.tpl	
						 comments.tpl
						 contact.tpl
						 entryadminctrls.tpl
						 errorlist.tpl
						 form.css
						 login.tpl
						 login_success.tpl
						 rss.tpl
						 search.tpl
						 search_results.tpl
	
				themes/
					  leggero/
						     admin.tpl
						     comments.tpl
						     cpheader.tpl
						     default.tpl
						     entry-default.tpl
						     footer.tpl
						     header.tpl
						     id
						     index.tpl
						     preview.png
						     preview.tpl
						     previewstatic.tpl
						     static.tpl
						     theme.conf.php
						     widgets.tpl

						     flatmaas-rev/
									     preview.png
									     style.conf.php
	
									     imgs/
										     arrow.gif
										     backshade.png
										     backshade-2.png
										     backshade-3.png
										     blockquote.png
										     entry.png
										     fp-logo.png
										     fp-logo-crop.jpg
										     fp-logo-crop.png
										     sf_h4.png
										     shade.png
										     transp.gif

									     res/
										    admin.css
										    column.css
										    common.css
										    globals.css
										    style.css
										    toggleMenu.js

						     leggero/
							  	    preview.png
								    style.conf.php

								    imgs/
									    backshade.png
									    backshade-2.png
									    backshade-3.png
									    buttonsh.png
									    buttonsh2.png
									    shade.png

								    res/
									   admin.css
									   column.css
									   common.css
									   globals.css
									   print.css
									   style.css

						     leggero-v2/
									   preview.png
									   style.conf.php

									   imgs/
										   back.jpg
										   backshade.png
										   buttonsh.png
										   buttonsh2.png
	
									   res/
									      admin.css
									      column.css
									      common.css
									      globals.css
									      print.css
									      style.css

Informações de desenvolvimento

PHP Template

O FlatPress utiliza o Smarty para auxílio na criação de temas.

Smarty é um sistema que traduz templates contendo tags especiais para o php. Ele nos permite abstrair mais da lógica e a facilitar ao projetar um modelo. Caso não tenha familiaridade, sugiro que leia a documentação v3 e v4 (somente em inglês) e a v2 (em português, mas desatualizada).

Está em teste a atualização de versão do FlatPress com o Smarty 4.x em branch separado.

Estrutura Padrão

Utilize o tema leggero como base e altere as variáveis. Os arquivos abaixo são os requeridos.

	
fp-interface/						
			themes/
				  pastaNomeTema/
							   id									<- Contém o mesmo nome da pasta do tema
							   theme.conf.php						<- Arquivo com as configurações, a variável theme['version'] 
													   				   deve ser maior que 0.70 para o estilo carregar corretamente
	
							   admin.tpl							<- Entrada da página de administração
	
							   index.tpl							<- Página de entrada do tema (blog ou site)
							   default.tpl							<- Página padrão utilizada na paginação, no comentário, página de erro etc
	
							   static.tpl							<- Requerido quando há páginas estáticas, por exemplo, página 'Sobre'
							   previewstatic.tpl					<- Se não interessar a pré-visualização, crie o arquivo com o
																	   texto "Pré-visualização Desativada"
	
							   comments.tpl							<- Template necessário ao chamar a URL com final '.../SeuArtigo/comments'
																	   Não é obrigatório, deixe vazio caso não vá utilizar comentários ou essa URL
																	   Você pode utilizar o Disqus substituindo todo conteúdo de
																	  '{comments}...{/comments}' por 
																	  '{literal} código JS {/literal}' (mas não recomendo)
	
							   preview.tpl							<- Item incluso no início do Editor quando edita uma postagem
																	   Se não interessar a pré-visualização, crie o arquivo com o
																	   texto "Pré-visualização Desativada"
	
							   preview.png							<- Visualização padrão do tema que aparece no painel
							   
							   pastaNomeDoEstilo/					<- Deve ser inserido no arquivo de configuração acima 
													   				   na variável theme['default_style'] o nome dessa pasta
	
									   			preview.png			<- Visualização do estilo que personalizado
	
								   				style.conf.php		<- Arquivo de configuração do estilo
	
												res/				<- Contém os arquivos de recursos utilizados no template como css, dentre outros
												   style.css
												   admin.css
	
							   pastaNomeDoEstilo2/					<- Seguir a mesma estrutura do 'pastaNomeDoEstilo/'
												...
							   pastaNomeDoEstilo3/					
												...

Abaixo o conteúdo de alguns arquivos com algumas informações

# index.tpl      
{* Este é um comentário em Smarty que não será mostrado nem processado *} 	
<!-- Você pode incluir comentário HTML também, que ficarão visíveis no código -->	
{* Essa index.tpl é a página de entrada do blog, você pode incluir só HTML se quiser *} 	
	
{* Inclui um arquivo com o cabeçalho do HTML (não é obrigatório, inclusão de arquivos) *} 		
{include file=header.tpl}

	<div id="main">
	
		{* Define uma marcação de bloco 'igual a tag HTML, tem apenas fins semanticos' *}
		{entry_block}
			
			{* define as entradas - requerido *}
			{entry}
				{include file='entry-default.tpl'}
			{/entry}

			{* A paginação requer o template default.tpl *}
			<div class="navigation">
				{nextpage}{prevpage}
			</div>

		{/entry_block}

	</div>			

	{* não é obrigatório separar os widgets em outro arquivo, pode ser inserido nesse arquivo *}
	{include file=widgets.tpl}
				
{include file=footer.tpl}

# admin.tpl
{* Página de entrada padrão do painel de administração *} 	
	
{* Inclui um arquivo com o cabeçalho do HTML (não é obrigatório, inclusão de arquivos, caso não queira) *}
{* Editando da maneira correta você pode refazer o painel do modo que achar mais interessante *}
{* Baixe outros temas e veja os arquivos de cada um e edite conforme suas necessidades *}
{include file=cpheader.tpl}

	<div id="cpmain">

		<div class="entry">
		
		  <ul id="admin-small-nav">
		  	  <li><a href="{$smarty.const.BLOG_BASEURL}">Home</a></li>
			  <li><a href="{$smarty.const.BLOG_BASEURL}login.php?do=logout">Logout</a></li>
		  </ul>
		
		{page}
				<h1 class="title">{$subject}</h1>
				<div class="body">{controlpanel}</div>
		{/page}
	
		</div>
		
	</div>
	
{include file=footer.tpl}

# theme.conf.php
	
<?php
/*
 * Theme Name: NomeDoSeuTema
 * Theme URI: http://www.nomeDoSiteDoTema.com
 * Description: Descreva aqui sobre seu tema.<br><br>Este tema possui outros estilos <a href="admin.php?p=themes&action=style">veja aqui</a>
 * Version: 0.71
 * Author: NomeDeQuemCriou
 * Author URI: http://www.nomeDoSiteDoDesenvolvedor.net
 */
	
$theme['name'] = 'NomeDoSeuTema';
$theme['author'] = 'NomeDeQuemCriou';
$theme['www'] = 'http://www.nomeDoSiteDoTema.com';
$theme['description'] = 'Descreva aqui sobre seu tema.';

# coloque aqui um numero da versão; devido a bug de não imprimir a pasta do estilo padrão, deve ser igual ou superior a 0.71
# sugiro para testes até 0.99 e versões estáveis 1.0 em diante
$theme['version'] = 0.71;

	
$theme['default_style'] = 'pastaNomeDoEstilo';  # trata-se da pasta do estilo padrão
$theme['style_def'] = 'style.css'; 			 	# nome do arquivo CSS para o estilo padrão
$theme['style_admin'] = 'admin.css';			# css do painel de administração

# sobrescreve o menu padrão e o layout do painel
remove_filter('admin_head', 'admin_head_action');

# registra dois widgetsets para o tema
register_widgetset('right');
register_widgetset('left');
	
?>

# style.conf.php
	
<?php
/*
 * Style Name: Nome do Estilo
 * Style URI: http://www.nomeDoSiteDoTema.com
 * Description: Informação sobre o estilo
 *	
 * Version: 0.705 						# Número da versão do estilo
 * Author: NomeDeQuemCriou
 * Author URI: http://www.nomeDoSiteDoDesenvolvedor.net
 */
	
$style['name'] = 'NomeDoSeuEstilo';
$style['author'] = 'NomeDeQuemCriou';
$style['www'] = 'http://www.nomeDoSiteDoTema.com';

# versão do estilo
$style['version'] = 0.705;

# arquivos padrões do estilo localizados dentro da pasta 'res'
$style['style_def'] = 'style.css';
$style['style_admin'] = 'admin.css';
$style['style_print'] = 'print.css';
$style['style'] = 'default';
	
?>


	# Exemplo de inserção de arquivo - url válida
	
	{* caminho absoluto *}
	{include file="/usr/local/include/templates/cabecalho.tpl"}
	
	{* caminho absoluto (idem) *}
	{include file="file:/usr/local/include/templates/cabecalho.tpl"}
	
	{* caminho absoluto do windows (DEVE usar o prefixo "file:") *}
	{include file="file:C:/www/pub/templates/cabecalho.tpl"}
	
	{* incluir a partir do recurso de template chamado "db" *}
	{include file="db:header.tpl"}
		
	-------------------------------------------------------------------
	
	# Trabalhando diretamente com PHP

	{php}
		// Inclua aqui códigos PHP que serão ignorados pelo processador Smarty
	
		// Script php diretamente no template 		
		include("/caminho/para/condicoes_do_tempo.php");
	
		// Use esse comando no início do index.tpl para verificar quais as variáveis do flatpress
		echo '<pre>';
			print_r($this->get_template_vars());
		echo '</pre>';
	
	{/php}
	
	-------------------------------------------------------------------
	
	# Carregando arquivo externo PHP e atribuindo no template
	# Modo correto de usar ao invés de "{php} ... {/php}" que está depreciada 
	
	  # load_nav.php
	    ------------
	   <?php
	    // carrega variáveis de um banco de dados mysql e define elas para o template
	      require_once("MySQL.class.php");
	      $sql = new MySQL;
	      $sql->query("select * from site_nav_sections order by name",SQL_ALL);
	      $this->assign('sections',$sql->record);
	   ?>	
	
	  # index.tpl
	   ---------
	   {* inclui o arquivo com os dados acima *}
	   {include_php file="/caminho/para/load_nav.php"}
	
	   {* itera sobre os dados '$sections' atribuidos no arquivo acima *}
	   {foreach item="curr_section" from=$sections}
	     <a href="{$curr_section.url}">{$curr_section.name}</a><br>
	   {foreachelse}
		 Nenhum resultado encontrado
	   {/foreach}
	
	-------------------------------------------------------------------
	
	# Miscelaneas
	
	{* tudo que estiver dentro das tags abaixo será apresentado em uma linha *}
	{strip}
  	  <table border=0>
	    <tr>
	     <td>
		  ...
	  </table>
	{/strip}
		
	{* será renderizado no navegador como: *}
	<table border=0><tr><td>...
	
	
	# Email com codificação em JS ou Hexadecimal
	
	{mailto address="me@domain.com" encode="javascript" subject="Hello to you!" cc="you@domain.com,they@domain.com" extra='class="email"'}
	{mailto address="me@domain.com" encode="hex" extra='class="email"'}

Constantes do Tema

{$flatpress.title} - Título do Blog
{$flatpress.subtitle} - Legenda do blog
{$flatpress.footer} - O texto mostrado na parte inferior da página)
{$flatpress.www} - A URL do Blog especificada na Área de Administração
{$flatpress.autor} - Nome do autor
{$flatpress.email} - Endereço de e-mail
{$flatpress.maxentries} - Número máximo de entradas mostradas por página
{$flatpress.version} - Versão do CMS
{$flatpress.charset} - Informa o conjunto de caracteres
{$flatpress.themeurl} - Retorna a URL do tema que está ativa (por exemplo: /fp-interface/themes/leggero/)
{$subject} - Título da postagem
{$pagetitle} - Contém o título da página que está sendo visualizada

Constantes do Painel

{$fp_config.locale.lang} - Informa o idioma corrente do FlatPress, por exemplo 'pt-br' para Português, e 'en-us' para Inglês Americano
{$fp_config.locale.dateformat} - Formato da data
{$fp_config.locale.timeformat} - Formato da hora
{$panelstrings.descr} - Descrição do Painel, dentro da Área de Administração
{$panelstrings.head} - O título do Painel, dentro da Área de Administração

Outros

A variável reservada smarty possui várias utilidades, destaco abaixo apenas algumas:

{$smarty.const.BLOG_BASEURL} - Informa a URL base, por exemplo, para a instalação na pasta flatpress retornará https://www.site.com/flatpress/
{$smarty.now|date_format:"%d/%m/%Y %H:%M:%S"} - Formata a hora no padrão português dd/mm/yyyy hh:mm:ss
{$smarty.server.SERVER_NAME} - Retorna o nome do servidor
{$smarty.get.page} - Mostra o valor de exibição da página do URL ($_GET) .../index.php?page=foo
{$smarty.post.page} - Retorna o valor da variável page da requisição $_POST .../index.php?page=foo
{#foo#} ou {$smarty.config.foo} - Retorna o valor da váriavel 'foo' definida em um arquivo .conf carregada pela sintaxe "{config_load file='foo.conf'}" [+]
{literal} conteúdo {literal} - Envolva o texto ou código com essas tags quando precisar que o processador Smarty deixe como está escrito
{"texto "|substr:3|strtoupper} - Remove as 3 primeiras letras do subtítulo e altera para maiuscula (após o '|' é chamado a função e os ':' separa os parâmetros) [+]
{$artigo|truncate:40:"..."} - Quebra o conteúdo da string em 40 caracteres e insere os 3 pontinhos (uso de 2 parâmetros)
{nextpage}/{prevpage} - Variáveis de paginação para pagina próxima e antiga

Implementar e Mover as Extensões

Na estrutura do tema você irá deixar uma ou mais áreas para inserir as extensões (plugins). Estas são movimentadas de um local para o outro através dos widgets.

# Insere o widget na coluna esquerda do tema
	
<div class="col-left">
	{widget pos=left}
		{$subject}
		{$content}
	{/widget}
</div>
	
# Insere o widget na coluna direita do tema
	
<div class="col-right">
	{widget pos=right}
		{$subject}
		{$content}
	{/widget}
</div>
	
# outros valores de pos (posição) são 'top' e 'bottom'
	
{widget pos=top}
	...
{widget pos=bottom}
...

Lembre que o valor após 'pos' acima deve estar registrada na configuração do arquivo /theme.conf.php utilizando register_widgetset('valor').

Caso queira definir um valor de pos, além dos informados acima, edite o arquivo /fp-content/config/widgets.conf.php e insira mais um valor no array.

Leia mais sobre os widgets e o desenvolvimento das extensões e inserção no tema.

O ideal é sempre separar os arquivos de template .tpl logicamente, por exemplo, navtop.tpl (para navegação no topo), header.tpl para cabeçalho e widget-left.tpl para coluna esquerda e etc, quando há mais de uma variável com o mesmo nome no mesmo arquivo, nesse caso o smarty irá processá-las separadamente. Simule o erro ao copiar o conteúdo de widgets.tpl do arquivo default.tpl e colar na 5a linha.

Mais informações no wiki oficial sobre Widgets e criação de tema