Como criar uma pele do zero mediawiki

8 métodos:

código de inicializaçãoFixação lista de categorias de códigoCódigo principal método execute ()código XHTML da estrutura principalelementos comuns do código do siteelementos comuns da página de códigoCódigo de barras de ferramentas comunsPortlets (blocos de navegação principal)

Muitos sites usam o software de e MediaWiki wikiHow é um deles! Como você pode ver, embora MediaWiki já vem com um conjunto de peles (pele) pronto para usar, muitos sites, como o wikiHow, decidiu criar sua própria pele para dar ao local uma aparência única. Há muitas maneiras de personalizar a aparência de um site baseado no MediaWiki e todas elas envolvem as peles. Normalmente, para a maioria dos níveis de personalização que não é necessário para criar uma nova pele a partir do zero. Em outros casos, simplesmente modificar uma pele existente encaixe para as necessidades de cada um. No entanto, se você quiser fazer uma mudança radical na concepção da wiki, você precisa criar sua própria pele a partir do zero. Este artigo irá orientá-lo para que você possa fazer isso de forma organizada, simples e sistemática.


Para fins de demonstração, o artigo vai assumir que a sua nova pele será chamado TrialSkin. Você tem que substituir todas as referências a "TrialSkin" com o nome de sua pele.

passos

1
Criar os arquivos necessários estrutura básica para a sua nova pele. Isso envolve a criação dos seguintes ficheiros e pastas (todos os quais devem ser adicionados à pasta peles a instalação do MediaWiki):
  • um arquivo TrialSkin.php. Isto é onde você colocar a maior parte do código e definir o layout das páginas.
  • um arquivo TrialSkin.deps.php. Este é um arquivo padrão que provavelmente contém o mesmo código. Ele é criado para corrigir quaisquer problemas com o arquivo PHP.
  • anuário trialskin. Neste diretório todos os outros arquivos relacionados com pele serão armazenados, incluindo lençóis e imagens de estilo.
  • um arquivo /skins/trialskin/main.css, que irá conter a folha de estilo principal para a pele. Este arquivo é opcional, mas é provável que tenha de usá-lo.
  • Stylesheet arquivos navegador reparação específica, como /skins/trialskin/IE60Fixes.css. Esses arquivos são opcionais, mas o uso recomendado.
  • 2
    Adicionar código de inicialização, em seguida, como exemplificado na subseção "código de inicialização" deste artigo. substitui TrialSkin com o nome de sua pele e trialskin com o nome de sua pele depois de ter convertido todas as letras minúsculas.
  • 3
    Adicione o código "Fixação lista de categorias" tal como é mostrado no número apropriado deste artigo.
  • 4
    Define a função execute (), que será chamado para a saída o conteúdo das páginas no cliente navegadores.
  • 5
    Declara a variável global $ wgUser função no execute () e utiliza o método de getSkin () para um objeto ou variável $ pele. Certamente você precisa que a variável. No entanto, se você não precisa, então você não precisará executar esta etapa. Você vai encontrar um exemplo típico de como declarar a função execute () com o código de mais vulgarmente utilizado na alínea "Declaração execute () função".
  • 6
    Começar a adicionar código (PHP e XHTML) para criar páginas no seu wiki. Mesmo no caso em que você quer fazer uma mudança radical de design, você provavelmente terá de criar o mesmo conjunto de dados usando peles normais (talvez com algumas modificações). Elementos, componentes e blocos comuns para uma página são (ver as subsecções para mais detalhes ou código de exemplo):
  • O código XHTML que se abre (e eventualmente fechada) Saída de HTML para ser enviado para o navegador do cliente
  • O elemento de cabeçalho, que importa as folhas de estilo, scripts, define metadados e determina o título da página exibida na barra de título do navegador para a página específica que está sendo visualizado.
  • A etiqueta que indica o início do corpo. Esta tag abre o elemento do corpo da página e especifica o que acontece quando a página é carregada ou é feito um clique duplo, se houver esse manipulador.
  • O bloco nome do site
  • A imagem do logotipo do site
  • O Site slogan
  • aviso bloco do Site
  • notificação de mensagem do usuário Block (se necessário)
  • A barra de ferramentas do usuário
  • Bloco de navegação intra-page
  • pesquisa
  • Caixa de ferramentas
  • Ligações de idiomas
  • nome da página
  • A página Subtítulo
  • página de recuperação de aviso
  • página de conteúdo
  • Categoria ligações
  • A página barra de ferramentas
  • Rodapé
  • Código de fechamento
    • método 1
    código de inicialização

    substitui SkinTrialSkin pela peleElNombreDeTuPiel, trialskin por elnombredetupiel e TrialSkinTemplate por TemplateElNombreDeTuPiel.

    lt ;? php// Código de inicializaçãose( !definida("MediaWiki") )morrer("Este arquivo de pele não é um ponto de entrada válido.")-require_once("Inclui / SkinTemplate.php `)-// SkinTemplate o código principal é hereditária e CSS é estabelecida e o modelo de filtroclasse SkinTrialSkin estende-se SkinTemplate {função initPage(&$ out) {SkinTemplate::initPage($ out)-$ this--gt;SkinName = `Trialskin`-$ this--gt;stylename = `Trialskin`-$ this--gt;modelo = `TrialSkinTemplate`-}}classe TrialSkinTemplate estende-se QuickTemplate {// Outras secções de código vai ser adicionado ao corpo deste tipo


    método 2
    Fixação lista de categorias de código
    • Basta copiar e colar o seguinte código no corpo da classe de modelo (TrialSkinTemplate para este exemplo), de preferência após o código de inicialização.
    / * Categoria funções são obtidas para criar uma lista apropriada * /função GetCategories() {$ catlinks=$ this--gt;getCategoryLinks()-se(!vazio($ catlinks)) {retorno "{$ Catlinks}"-}}função getCategoryLinks() {global $ wgOut, $ wgUser, $ wgTitle, $ wgUseCategoryBrowser-global $ wgContLang-se(contar($ wgOut-gt;mCategoryLinks) == 0)retorno ``-$ pele = $ wgUser-gt;getSkin()-# separador$ setembro = ""-// Unicode bidi construído usando caracteres de sobreposição// Para certificar-se de que as ligações não tocam tão desarrumado$ dir = $ wgContLang-gt;isRTL() ? `Rtl` : `Ltr`-$ incorporação = "
  • $ dir
    • ">"-$ pop = ``-$ t = $ incorporação . implodir ( "$ {Pop} {$} Setembro $ {Embed}" , $ wgOut-gt;mCategoryLinks ) . $ pop-$ msg = wfMsgExt(`Pagecategories`, ordem(`Parsemag`, `Escape`), contar($ wgOut-gt;mCategoryLinks))-$ s = $ pele-gt;makeLinkObj(título::newFromText(wfMsgForContent(`Pagecategorieslink`)), $ msg). $ t-# Categorização semelhante a ligações DMOZ (opcional), será exibido# Abaixo da lista de categorias a que um artigo pertencese($ wgUseCategoryBrowser) {$ s .= `
    `    -# Obtém uma grande árvore-mãe arranjo$ parenttree = $ wgTitle-gt;getParentCategoryTree()-# A pele por referência objecto é passado, uma vez que não pode ser# Acesso dentro do drawCategoryBrowser método sub-função$ tempout = explodir(" n", pele::drawCategoryBrowser($ parenttree, $ this-))-# Limpar a primeira entrada falsa e ordensunset($ tempout)-asort($ tempout)-# Uma amostra por linha$ s .= implodir("
     n", $ tempout)-}retorno $ s-}
    método 3
    Código principal método execute ()
    • Se você não vai usar as linhas que declaram $ wgUser, $ wgSitename e US $ pele, você pode removê-los.
    função EXECUTAR() {// Declaração de variáveis ​​globais e obter objeto pele se você precisar usá-lo mais tardeglobal $ wgUser, $ wgSitename-$ pele = $ wgUser-gt;getSkin()-// Nome do site recupera$ this--gt;conjunto(`Sitename`, $ wgSitename)-// Os avisos são suprimidas para evitar perdas percebe cerca de US $ this- gt indexação; dadoswfSuppressWarnings()-
    método 4
    código XHTML da estrutura principal
    • Abrindo código. Aqui, você instrui a pele que a saída para o tag HTML e declarar todos os espaços de nomes XHTML necessárias. O código a seguir é uma declaração típica que se você quiser você pode personalizar, mas certamente não é necessário.
    ?gt;$ this-->texto(`Xhtmldefaultnamespace`) ?>" lt ;? phpforeach($ this--gt;dados ás $ tag = Gt; $ ns) {?gt;xmlns:lt ;? php eco "{$ Tag}="{$} Ns" "-} ?gt;xml: lang ="lt ;? php $ this--gt;texto(`Lang`) ?gt;" lang ="lt ;? php $ this--gt;texto(`Lang`) ?gt;" dir ="lt ;? php $ this--gt;texto(`Dir`) ?gt;"gt;
    • O elemento de cabeçalho. Aqui, você dar o elemento de cabeçalho, juntamente com todo o seu conteúdo. Isso inclui links para folhas de estilo, lado do cliente scripts e metadados para robôs e navegadores. O código incluído aqui é um código típico que você pode ter que ser modificado para incluir qualquer script personalizado ou estilo que você quer.
    • Para este código para funcionar como esperado, você deve ter os seguintes arquivos (se você não precisa deles, você pode remover as linhas onde qualquer uma dessas folhas de estilo são importados):
    • /common/commonPrint.css. Folha de estilo para impressão de páginas. Se você não quiser usar o padrão de impressão de folha de estilo, você pode alterar o caminho onde este é.
    • main.css, contents.css. Os principais folhas de estilo para sua pele. Estes devem estar no diretório de sua pele (peles / / trialskin neste exemplo)
    • handheld.css. A folha de estilo a ser usado com dispositivos portáteis.
    • IE50Fixes.css, IE55Fixes.css, IE60Fixes.css, IE70Fixes.css. Arranjos para diferentes navegadores. Você pode copiar esses arquivos a partir de uma pele existente, uma vez que, provavelmente, não terá que mudar nada.
  • As últimas linhas, a partir de "/ *** Vários scripts e estilos relacionados com MediaWiki *** / " folhas de estilo incluem usuário específico, de página e largura da página. Se você não vai usar esses recursos, você só tem que remover tudo o que é acima do comentário .
  • Observou-se que a chamada $ this-gt; html ( `headscripts`), em alguns casos leva a erros, por isso, se algo der errado, tente removê-lo.
  • Se o código por alguma razão não funcionar corretamente, você pode deixar de fora esse código completamente e escrever seu próprio código, incluindo links para folhas de estilo, scripts e tag de título, tudo por conta própria!
    • $ this-->texto(`Mimetype`) ?>- charset = $ this-->texto(`Charset`) ?>"/>lt ;? php $ this--gt;html(`Headlinks`) ?gt;<span class="kw2">lt ;? php</span> <span class="re0">$ this-</span><span class="sy0">-gt;</span><span class="me1">texto</span><span class="br0">(</span><span class="st_h">`Pagetitle`</span><span class="br0">)</span> <span class="sy1">?gt;</span>lt ;? php / *** *** Folhas de estilo Geral / ?gt;lt ;? php / *** Folhas de estilo específicas de mídia *** / ?gt;lt ;? php se(vazio($ this--gt;dados) ) { ?gt;média ="impressão"lt ;? php } ?gt; href ="lt ;? php $ this--gt;texto(`Stylepath`) ?gt;/common/commonPrint.css?lt ;? php eco $ GLOBALS ?gt;" / Gt;$ this-->texto(`Stylepath`) ?>/ $ this-->texto(`StyleName`) ?>/handheld.css? eco $ GLOBALS ?>"/>lt ;? php / *** Folhas de estilo específicas do navegador *** / ?gt;lt ;? php / *** *** Geral corrige IE / ?gt;lt ;? php impressão pele::makeGlobalVariablesScript($ this--gt;dados)- ?gt;lt ;? php / *** Vários scripts e estilos relacionados com MediaWiki *** / ?gt;lt ;? php $ this--gt;texto(`Jsmimetype`) ?gt;" src ="lt ;? php $ this--gt;texto(`Stylepath`) ?gt;/common/wikibits.js?lt ;? php eco $ GLOBALS ?gt;"gt;lt ;? phpse($ this--gt;dados) { ?gt;lt ;? php $ this--gt;texto(`Jsmimetype`) ?gt;" src ="lt ;? php $ this--gt;texto(`Jsvarurl`) ?gt;"gt;lt ;? php} ?gt;lt ;? phpse($ this--gt;dados) { ?gt;lt ;? php}se($ this--gt;dados) { ?gt;lt ;? php}se($ this--gt;dados) { ?gt;lt ;? php $ this--gt;texto(`Jsmimetype`) ?gt;" src ="lt ;? php $ this--gt;texto(`UserJS` ) ?gt;"gt;lt ;? php}se($ this--gt;dados) { ?gt;lt ;? php $ this--gt;texto(`Jsmimetype`) ?gt;"gt;lt ;? php $ this--gt;html(`Userjsprev`) ?gt;lt ;? php}se($ this--gt;dados) impressão $ this--gt;dados- ?gt;lt ;? php $ this--gt;html(`Headscripts`) ?gt;
    • O corpo tag de abertura. Criar o corpo tag de abertura. Provavelmente, você não tem que mudá-lo a menos que você deseja codificar o estilo de corpo no rótulo.
    lt ;? php se($ this--gt;dados) { ?gt;ondblclick ="lt ;? php $ this--gt;texto(`Body_ondblclick`) ?gt;"lt ;? php } ?gt;lt ;? php se($ this--gt;dados) { ?gt;onload ="lt ;? php $ this--gt;texto(`Body_onload`) ?gt;"lt ;? php } ?gt; class ="mediawiki lt ;? php $ this--gt;texto(`Nsclass`) ?gt; lt ;? php $ this--gt;texto(`Dir`) ?gt; lt ;? php $ this--gt;texto(`Pageclass`) ?gt;"gt;
    • Fechando código. Este é adicionado ao fim do ficheiro. Fechar qualquer tag, script ou código PHP está aberta. Todo o código que se segue deve ser colocado antes disso, deve ser a última linha da pele arquivo.
    lt ;? php $ this--gt;html(`Bottomscripts`)- / * JS chama runBodyonloadHook * / ?gt;lt ;? php $ this--gt;html(`Reporttime`) ?gt;lt ;? php se ( $ this--gt;dados ): ?gt;lt ;? php endif- ?gt;lt ;? phpwfRestoreWarnings()-} // Fim do método execute ()} // Fim da classe?gt;


    método 5
    elementos comuns do código do site
    • Observe o uso de $ this-gt; de texto ($ msg) e $ this-gt; html ($ msg). Eles são utilizados em grande parte da pele.
    • Nome do site:
    lt ;? php eco $ this--gt;texto(`Sitename`) ?gt;
    • imagem do logotipo do site
    lt ;? php $ this--gt;texto(`Jsmimetype`) ?gt;"gt; Se (window.isMSIE55) fixalpha () - 
    • slogan Site:
    lt ;? php $ this--gt;msg("Tagline `) ?gt;
    • bloco de mensagens local. O conteúdo dos anúncios normalmente Site é editado e adicionado à mensagem página WikiMedia: Sitenotice.
    lt ;? php se($ this--gt;dados) { ?gt;
    lt ;? php $ this--gt;html(`Sitenotice`) ?gt;
    lt ;? php } ?gt;
    • Bloquear usuário notificação de mensagem:
    lt ;? php se($ this--gt;dados) { ?gt;
    lt ;? php $ this--gt;html(`NewTalk`) ?gt;
    lt ;? php } ?gt;
    • navegação Bloco intra-página (opcional):
    lt ;? php se($ this--gt;dados) { ?gt;
    lt ;? php } ?gt;
    método 6
    elementos comuns da página de código
    




    • Nome da página:
    lt ;? php $ this--gt;dados!=""?$ this--gt;html(`Título`):$ this--gt;texto(`Título`) ?gt;
    • A página Subtítulo:
    lt ;? php $ this--gt;html(`Legenda`) ?gt;
    • Conteúdo da página:
    lt ;? php $ this--gt;html(`BodyText`) ?gt;
    • ligações Categoria:
    lt ;? php se($ this--gt;dados) { ?gt;
    lt ;? php } ?gt;
    • Rodapé. Este código é iterativo, por isso você deve ter cuidado quando você copia!
    lt ;? php $ this--gt;html(`Poweredbyico`) ?gt;
    lt ;? php}se($ this--gt;dados) { ?gt;
    lt ;? php $ this--gt;html(`Copyrightico`) ?gt;
    lt ;? php}// Pe ligações são geradas página adicional?gt;
      lt ;? php$ footerlinks = ordem(`LastModified`, `Númerodevisitas`, `Númerodeusuariosmirando`, `créditos`, `direitos autorais`,`Privacidade`, `sobre`, `aviso Legal`, `Slogan`,)-foreach( $ footerlinks ás $ aLink ) {se( isset( $ this--gt;dados ) && $ this--gt;dados ) {?gt;
    • eco$ aLink?>">lt ;? php $ this--gt;html($ aLink) ?gt;
      • lt ;? php}}?gt;
    método 7
    Código de barras de ferramentas comuns
    • barra de ferramentas do usuário. Este código cria o usuário links de navegação como a página do usuário, página de discussão, ligação logoff, etc.
    lt ;? php $ this--gt;msg(`Personaltools`) ?gt;
     
    • A página barra de ferramentas. Este código inclui a edição do links, criação e discussão, juntamente com outro usuário, dependendo do grupo.
    lt ;? php $ this--gt;msg("Vistas") ?gt;
     
    • Observe página de recuperação. Se a página foi removida antes e o usuário pode recuperar páginas, esta ligação deve aparecer (se você preferir)
    lt ;? php se($ this--gt;dados) { ?gt;
    lt ;? php $ this--gt;html(`Undelete`) ?gt;
    lt ;? php } ?gt;
    método 8
    Portlets (blocos de navegação principal)
    • Pesquisa Portlet (a barra de pesquisa). Esta é uma implementação do conteúdo mínimo que só mostra o que eles devem ir para o trabalho de pesquisa bar.
    • barra de ferramentas Portlet:
    lt ;? php $ this--gt;msg(`Caixa de ferramentas`) ?gt;
     


    





 

    
    
  
    
  
    Artigos Relacionados