Criar o seu próprio tema WordPress a partir do zero

, Author

O objectivo deste curto tuto é permitir-lhe criar o seu próprio tema WordPress em apenas alguns minutos. Este tuto é para qualquer pessoa que se sinta confortável com HTML & CSS. Permite-lhe ir buscar todo o conteúdo do WordPress para o integrar num HTML pré-existente & produção CSS. Ou para fazer num segundo passo uma vez exibido todo o conteúdo do WordPress.

Criar os ficheiros mínimos requeridos

Para obter um primeiro resultado, apenas:

  • criar um novo directório em wp-contents/temas p.por exemplo, my-own-theme
  • criar um ficheiro index.php lá
      neste ficheiro escrever por exemplo, Hi, it works
  • criar um ficheiro de estilo lá.css
    • neste ficheiro copia o seguinte código e modifica a informação
  • /* Theme Name: NOM DE VOTRE THEME URI: http://www.VOTRE-SITE.COM Description: DESCRIPTION DE VOTRE THEME. Version: 1.0 Author: VOTRE NOM */
    • cria-se uma imagem de ecrã.png (dimensões 1200×900) ilustrando o tema
    • ir para a aparência de fundo > temas e activar o novo tema lá
    • voltar à URL pública do sítio e actualizar a página
    • A página será exibida: Olá, está a funcionar

    Exibir conteúdo dinâmico relacionado com o site (nome, descrição, caminho para a pasta temática)

    Agora que exibimos o conteúdo da nossa página de índice.página php activando o tema, vamos percorrer algumas das etiquetas WP mais úteis para começar, estou a pensar em particular:

    • título do site
    • descrição do site/slogan
    • caminho para a pasta do tema, para que possamos ligar o nosso estilo de folha de estilo.css à nossa página index.php
    <?php bloginfo('stylesheet_directory'); ?> <!-- chemin vers le répertoire/thème du site du site --><?php bloginfo('name'); ?> <!-- nom du site --><?php bloginfo('description'); ?> <!-- description du site -->

    Criar um laço para exibir todos os artigos e o seu conteúdo

    Criaremos agora um laço que exibe todos os aritcles / posts. Por defeito, serão mostrados por ordem antincronológica (o mais recente primeiro)

    <!-- Commencer la boucle --><?php if (have_posts()) : while (have_posts()) : the_post(); ?><!-- Afficher les contenus de la boucle --><?php the_post_thumbnail(); ?> <!-- remplace la balise <img> ! alternativement, on peut remplacer l'attribut src de la balise <img> par --> <?php echo get_the_post_thumbnail_url(); ?><?php the_title(); ?> <!-- titre du post --><?php the_content(); ?> <!-- contenu du post --><?php echo get_the_date(); ?> <!-- date du post / on le fait des cette façon car sinon WP n'affiche qu'une fois la date si plusieurs posts on la même date--><?php the_permalink(); ?> <!-- lien vers le détail du post --><?php the_time(); ?> <!-- date de création du post --><?php the_author(); ?> <!-- auteur du post --><?php the_category();?> <!-- la/les catégorie(s) assignée(s) au post --><!-- Terminer la boucle --><?php endwhile; endif; ?>

    Filtrar os loops

    Podemos também filtrar os loops para mostrar apenas aquilo em que estamos interessados.

    <!-- n'afficher que les contenus de type 'post' (dans une page p.ex. --><?php query_posts('post_type=post') ?><!-- n'afficher que le premier post. On n'affiche qu'un post --><?php query_posts('posts_per_page=1'); ?><!-- Afficher uniquement le 2e, 3e et 4e post. On skip le premier et on en affiche 3 au total--><?php query_posts('offset=1&posts_per_page=3'); ?><!-- afficher tout excepté le premier post. --><?php query_posts('offset=1'); ?><!-- afficher tout excepté les 4 premiers posts. --><?php query_posts('offset=4'); ?>

    Activar a capacidade de adicionar uma imagem realçada

    Em functions.php, adicionar o seguinte código

    //activer image mise en avantadd_theme_support( 'post-thumbnails' );

    Menu de exibição

    Verá que por defeito não pode adicionar um menu. Tem de especificá-lo para o WordPress. Nas funções.php, copie o seguinte código:

    // ajouter une zone de menuregister_nav_menu( 'primary', __( 'Navigation Menu' ) );

    Então no seu tema, pode chamar o seu menu desta forma

    <?php wp_nav_menu(); ?>

    Personalize o link Mais…

    Em funções, copie este código:

    //personaliser "lire la suite" function modify_read_more_link() {return '<a class="more-link" href="' . get_permalink() . '">lire la suite...</a>';} add_filter( 'the_content_more_link', 'modify_read_more_link' );

    P>Próximo em estilo personalizar a classe de mais ligação

    Adicionar uma área widget

    Em funções, copiar este código:

    // Enregistrer une zone appelée 'Ma zone de widgets'function add_widget_Support() { register_sidebar( array( 'name' => 'La zone de widgets de Thomas', 'id' => 'zone-widgets', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', ) );}// Hook the widget initiation and run our functionadd_action( 'widgets_init', 'add_Widget_Support' );// puis mettre ceci dans le thème à l'endroit désiré:<?php dynamic_sidebar( 'zone-widgets' ); ?>

    Adicionar classes no corpo

    <body <?php body_class(); ?>>

    Adicionar wp_head() e wp_footer()

    Finalmente, ainda precisamos de adicionar as 2 funções que permitem ao WordPress adicionar todo o código necessário para que os plugins, etc. funcionem correctamente.

    <!-- Pour wp_head(), il faut le mettre juste avant la fermeture de la balise <head> --> <?php wp_head(); ?> </head><!-- Pour wp_footer(), il faut le mettre juste avant la fermeture de la balise <body> --> <?php wp_footer(); ?> </body> <!-- ou alors tout en bas si on inclut la fermeture des balises body et html dans le footer -->

    Diversos

    <!-- Insérer le nom d'une page ou d'un post suivi du nom du site dans la balise <title> --><title><?php wp_title(' - ', true, 'right'); ?> <?php bloginfo('name'); ?></title>

    Outras

    Deixe uma resposta

    O seu endereço de email não será publicado. Campos obrigatórios marcados com *