Após delimitarmos a estrutura do HTML e do CSS em um tema é necessário registrar nosso plugin dentro da aplicação OJS ou OMP. Faremos isso utilizando alguns alguns arquivos PHP e XML.
Vamos dar uma olhada na estrutura básica de um tema que chamaremos de tutorial-theme.
/plugins/themes/tutorial-theme/index.php
/plugins/themes/tutorial-theme/TutorialThemePlugin.inc.php
/plugins/themes/tutorial-theme/version.xml
/plugins/themes/tutorial-theme/locale/pt_BR/locale.po
/plugins/themes/tutorial-theme/styles/index.less
/plugins/themes/tutorial-theme/styles/variables.less
/plugins/themes/tutorial-theme/styles/structure.less
/plugins/themes/tutorial-theme/styles/forms.less
O arquivo /plugins/themes/tutorial-theme/index.php é utilizado para carregar nosso tema. Carregamos o arquivo de classe do tema e instanciamos um novo objeto
<?php
require_once('TutorialThemePlugin.inc.php');
return new TutorialThemePlugin();
?>
No arquivo /plugins/themes/tutorial-theme/TutorialThemePlugin.inc.php definimos a classe(class) do tema. Podemos então carregar as folhas de estilo (stylesheets) e executar quaisquer outras ações que desejarmos com a API do Tema.
<?php
import('lib.pkp.classes.plugins.ThemePlugin');
class TutorialThemePlugin extends ThemePlugin {
/**
* Carrega os estilos personalizados de nosso tema
* @return null
*/
public function init() {
$this->addStyle('stylesheet', 'styles/index.less');
}
/**
* Obtem o nome de exibição deste tema
* @return string
*/
function getDisplayName() {
return 'Tema Tutorial';
}
/**
* Obtem a descrição deste plugin
* @return string
*/
function getDescription() {
return ' Um tema de exemplo para o OJS ou o OMP construído com nossa fantástica documentação.';
}
}
O arquivo /plugins/themes/tutorial-theme/version.xml é obrigatório para configurarmos os metadados(metadata) do nosso tema que o OJS e o OMP utilizam para carregar e exibir de maneira apropriada.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE version SYSTEM "../../../lib/pkp/dtd/pluginVersion.dtd">
<version>
<application>tutorial-theme</application>
<type>plugins.themes</type>
<release>1.0.0.0</release>
<date>2016-11-21</date>
<lazy-load>1</lazy-load>
<class>TutorialThemePlugin</class>
</version>
O arquivo /plugins/themes/tutorial-theme/locale/pt_BR/locale.po permite-nos configurar qualquer termo(string) no nosso tema para que fique disponível para tradução para outros idiomas. Para fazer isso é necessário atribuir o termo(string) que se queira traduzir para uma key .
"Project-Id-Version: \n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2019-09-30T11:58:35-07:00\n"
"PO-Revision-Date: 2020-01-30 08:35+0000\n"
"Last-Translator: \n"
"Language-Team: Portuguese (Brazil) <http://translate.pkp.sfu.ca/projects/ojs/"
"themes-default/pt_BR/>\n"
"Language: pt_BR\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=n > 1;\n"
"X-Generator: Weblate 3.9.1\n"
msgid "plugins.themes.tutorial-theme.name"
msgstr "Tema Tutorial"
msgid "plugins.themes.tutorial-theme.description"
msgstr "Um tema de exemplo para o OJS ou o OMP desenvolvido com nossa fantástica documentação."
Lembra como demos um nome e uma descrição para nosso tema na classe de plugin do tema? Agora podemos atualizar aqueles métodos para carregarem nossas strings traduzidas.
/**
* Obtem o nome de exibição deste tema
* @return string
*/
function getDisplayName() {
return __('plugins.themes.tutorial-theme.name');
}
/**
* Obtem a descrição deste plugin
* @return string
*/
function getDescription() {
return __('plugins.themes.tutorial-theme.description');
}
Caso esteja desenvolvendo um tema para seu uso pessoal, você não precisará disso. Mas sempre recomendamos habilitar no código as capacidades de tradução para qualquer tema que venha a ser distribuído. A comunidade de usuários da Public Knowledge Project(PKP) abrange dezenas de países e idiomas que necessitam do software na sua própria língua.
Finalmente, o arquivo /plugins/themes/tutorial-theme/styles/index.less carrega nossos arquivos CSS/LESS personalizados. No nosso arquivo de classe de plugin do tema você pode verificar o seguinte método init:
public function init() {
$this->addStyle('stylesheet', 'styles/index.less');
}
Ao invocar addStylee apontar para nosso arquivo LESS principal, a aplicação automaticamente compilará e carregará o arquivo CSS no frontend de todo o periódico que estiver utilizando este tema.
Caso não tenha certeza sobre o que se trata o arquivo LESS leia a seção CSS/LESS acima.
Esta parte do guia de customização de temas introduziu a estrutura de um tema para OJS ou OMP. Mas existe muito mais que você pode fazer e experimentar com a API de Tema.
Continue a ler para mais dicas práticas sobre como usar Temas Filhos(Child Themes), a documentação completa de API de Tema e a API de Opções de Tema(Theme Options API). Assim como também estarão disponíveis links para exemplos existentes de temas personalizados “na natureza”.