Como criar um site de portfólio no WordPress
Publicados: 2016-02-18Ter uma página de portfólio em um site pode ser usado para muitas coisas. Por definição, é algo utilizado para guardar materiais como papéis, mapas, desenhos, fotos, etc. Uma carteira em termos financeiros refere-se a um conjunto de investimentos. Ou as pessoas também pensam em um portfólio como uma forma de mostrar seus trabalhos recentes. Por exemplo, designers gráficos podem usar um portfólio para exibir seus designs de logotipo, impressão ou site. Um construtor ou arquiteto pode usar um portfólio para mostrar seus projetos concluídos.
A principal lição aqui é que um portfólio tem muitos usos. Ele pode ser usado para armazenar ou agrupar itens de todos os tipos.
Neste post, vou demonstrar como criar um site de portfólio no WordPress.
Observação: recomendo que você sempre faça personalizações como essa em um tema filho. Fazer personalizações em um tema que você baixou de terceiros (um tema que você não desenvolveu) significa que você não poderá fazer atualizações de temas. Se você fizer isso, a atualização do tema eliminará todas as suas personalizações.
Vamos começar
A primeira coisa que eu recomendo fazer é criar um tipo de postagem personalizado (CPT). Isso ajudará a garantir que haja um local claro para adicionar e editar os itens do seu portfólio. Por exemplo, na imagem abaixo, você pode ver que tenho um site onde criei um CPT para Projetos, Publicações, Resenhas e Slides. Isso torna super fácil manter meu conteúdo organizado.
Criando o tipo de postagem personalizada
Para criar um CPT, coloque o seguinte código em seu arquivo functions.php . O seguinte criará um CPT para 'Projetos', mas isso pode ser alterado para qualquer coisa. Basta alterar qualquer referência a 'Projeto' e 'Projetos' para o que você quiser.
//Creating Custom Post types for Projects
function setup_projects_cpt(){
$labels = array(
'name' => _x('Projects', 'post type general name'),
'singular_name' => _x('Project', 'post type singular name'),
'add_new' => _x('Add New', 'Project'),
'add_new_item' => __('Add New Project'),
'edit_item' => __('Edit Project'),
'new_item' => __('New Project'),
'all_items' => __('All Projects'),
'view_item' => __('View Project'),
'search_items' => __('Search Projects'),
'not_found' => __('No Projects Found'),
'not_found_in_trash' => __('No Projects found in the trash'),
'parent_item_colon' => '',
'menu_name' => 'Projects'
);
$args = array(
'labels' => $labels,
'description' => 'My Projects',
'rewrite' => array('slug' => 'projects'),
'public' => true,
'menu_position' => 5,
'supports' => array('title', 'editor', 'thumbnail', 'excerpt', 'custom-fields'),
'has_archive' => true,
'taxonomies' => array(''),
'menu_icon' => 'dashicons-admin-multisite', //Find the appropriate dashicon here: https://developer.wordpress.org/resource/dashicons/
);
register_post_type('projects', $args);
}
add_action('init', 'setup_projects_cpt');
//The following snippet is used to enable categories for the projects CPT.
function projects_taxonomy() {
register_taxonomy(
'project_categories', //The name of the taxonomy. Name should be in slug form (no spaces and all lowercase. no caps).
'projects', //post type name
array(
'hierarchical' => true,
'label' => 'Project Categories', //Label Displayed in the Admin when creating a new project
'query_var' => true,
'rewrite' => array(
'slug' => 'projects', // This controls the base slug that will display before each term
'with_front' => false // Don't display the category base before
)
)
);
}
add_action( 'init', 'projects_taxonomy');
Agora que temos um CPT, acesse seu painel de administração e adicione alguns projetos de amostra que você pode usar para testá-lo. Certifique-se de dar um título, um trecho e adicionar uma imagem em destaque.
Depois de adicionar algumas entradas de amostra, você desejará exibi-las no front-end do seu site. A próxima etapa é criar a página que você usará para exibir seus projetos. Se você não precisar de nenhuma customização, você pode copiar tudo do archive.php do seu tema e colá-lo em um novo arquivo chamado archive-projects.php (archive-{post_type}.php). Então o URL desta nova página seria simplesmente http://yoursitedomain.com/projects/.
No entanto, como geralmente tenho algumas necessidades adicionais para minha página, prefiro criar um modelo personalizado, como projects-page.php . Se você optar por seguir esse caminho, precisará criar uma página em seu wp-admin e atribuir sua página a este novo modelo usando os 'Atributos de página'.
Neste novo modelo, certifique-se de adicionar o seguinte ao topo:
<?php /* Template Name: Projects Portfolio */ get_header(); ?>
Verifique se o modelo também contém o código get_footer na parte inferior da página:
<?php get_footer(); ?>
Depois de ter a base básica do seu modelo, você precisará criar o layout desejado e adicionar o código que consulta seu CPT. Certifique-se de adicionar o seguinte entre o get_header(); ?> get_header(); ?> e get_Footer(); ?> get_Footer(); ?> :
<?php /* Query the post */ $args = array( 'post_type' => 'projects', 'posts_per_page' => -1 );//this will return ALL of the posts from the projects CPT. You can also change this to a specific number such as 'posts_per_page' => 10... $loop = new WP_Query( $args ); //In this line we are telling WP to query the 'projects' CPT while ( $loop->have_posts() ) : $loop->the_post(); //In this line we are saying keep looping through the 'projects' CPT until all are returned ?>
Nota: Na consulta acima, você iniciou um loop while. No trecho de código abaixo, encerraremos o loop while.
Neste ponto, você consultou o CPT e agora precisa exibi-lo em seu site. Enquanto ainda estiver trabalhando em projects-page.php , adicione o seguinte código logo após o código de consulta acima:
<?php echo '<div class="project">';?>
<a href="<?php print get_permalink($post->ID) ?>"><?php echo the_post_thumbnail(); ?></a> <!-- This returns the featured image with it linked to the page that it was added to-->
<h4><?php print get_the_title(); ?></h4>
<?php print get_the_excerpt(); ?><br />
<a href="<?php print get_permalink($post->ID) ?>">Details</a><!-- This wraps the ‘Details’ link with the same url that the featured image gets wrapped in. -->
</div> <!-- End individual project col -->
<?php endwhile; ?><!-- End of the while loop -->
No snippet acima, você notará a adição de tags HTML. Essas tags controlam o layout da página. É importante incluí-los no loop while para que cada projeto retornado obtenha exatamente a mesma estrutura HTML, bem como classes CSS. A consulta acima retornará um container <div> com a classe “project”. Dentro de cada contêiner div, haverá uma 'Imagem em destaque' retornada como miniatura, o 'título' estilizado como H4, o trecho do projeto e, em seguida, um link 'Detalhes' para cada projeto encontrado no CPT 'Projetos'.
Nota: Como estamos usando um CPT, você também precisará adicionar suporte ao tema para a miniatura do post. Você pode até precisar definir as dimensões da miniatura antes de usar este exemplo de código. Isso seria feito em seu functions.php file .
add_theme_support( 'post-thumbnails', array( 'projects' ) ); // adds thumbnail support for the Projects CPT
Uma nota rápida: Suas classes HTML e CSS precisarão ser ajustadas de acordo para corresponder ao design do seu site. No meu exemplo, estou usando o Bootstrap para criar meu layout e criei classes como project e page-wrap , que contêm estilo adicional.
Por exemplo, col-sm-6 col-md-3 cria um layout de duas colunas em telas pequenas e um layout de quatro colunas em telas médias e grandes. Se eu não estivesse usando o Bootstrap, teria que adicionar algumas larguras de contêiner à classe do projeto. Eu provavelmente precisaria de um float:left para que todos os projetos se alinhassem bem nas colunas.
Quando terminar, seu projects-page.php deve ficar assim:
<?php
/* Template Name: Projects Portfolio */
get_header();
?>
<!-- ============ CONTENT START ============ -->
<div class="container>
<div class="row">
<div id="content-projects" class="page-wrap">
<div class="col-sm-12 content-wrapper">
<?php while ( have_posts() ) : the_post(); ?> <!--queries the projects-page.php-->
<?php the_content() ?> <!--Grabs any content added to the Editor-->
<?php endwhile; // end of the loop. ?>
</div><!-- End intro/descriptive copy column-->
</div> <!-- End intro/descriptive copy container-->
</div>
<div id="projects" class="row">
<!-- Start projects Loop -->
<?php
/*
Query the post
*/
$args = array( 'post_type' => 'projects', 'posts_per_page' => -1 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
<?php echo '<div class="project col-sm-6 col-md-3">';?>
<a href="<?php print get_permalink($post->ID) ?>">
<?php echo the_post_thumbnail(); ?></a>
<h4><?php print get_the_title(); ?></h4>
<?php print get_the_excerpt(); ?><br />
<a class="btn btn-default" href="<?php print get_permalink($post->ID) ?>">Details</a>
</div> <!-- End individual project col -->
<?php endwhile; ?>
</div><!-- End Projects Row -->
</div><!-- End Container -->
<!-- ============ CONTENT END ============ -->
<?php get_footer(); ?>
Criando sua página de detalhes do projeto
Agora que temos uma página de portfólio, precisamos garantir que tenhamos uma página para direcionar nossos usuários quando eles clicarem na miniatura ou no link 'Detalhes'.
Para isso, precisaremos criar um novo template em nosso tema chamado single-projects.php . Usando 'single' e os 'projects' do slug do CPT, o WordPress sabe usar este modelo para todos os CPTs do projeto.
single-{post_type}.php
Assim como fizemos para o projects-page.php , precisaremos adicionar o seguinte:
<?php /* This is the template for displaying Single Project details */ get_header(); ?>
E no fundo:
<?php get_footer(); ?>
Se você ainda não tem uma ideia de como deseja que esta página se pareça, você pode querer copiar todo o código do single.php do seu tema e colá-lo neste novo arquivo.
Então é isso! Assim você tem um portfólio. Deixe-nos ver o que você construiu nos comentários!