Как создать сайт-портфолио на WordPress
Опубликовано: 2016-02-18Наличие страницы портфолио на веб-сайте может быть использовано для очень многих вещей. По определению, это нечто, используемое для хранения таких материалов, как бумаги, карты, рисунки, фотографии и т. д. Портфель с точки зрения финансов относится к группе инвестиций. Или люди также думают о портфолио как о способе продемонстрировать свои последние работы. Например, графические дизайнеры могут использовать портфолио, чтобы продемонстрировать свой логотип, печать или дизайн веб-сайта. Строитель или архитектор могут использовать портфолио для демонстрации своих завершенных проектов.
Ключевым выводом здесь является то, что у портфолио много применений. Его можно использовать для хранения или группировки предметов всех типов.
В этом посте я покажу, как создать сайт-портфолио на WordPress.
Примечание. Я рекомендую вам всегда выполнять подобные настройки в дочерней теме. Внесение изменений в тему, которую вы загрузили у стороннего поставщика (тема, которую вы не разработали сами), означает, что вы не сможете получать обновления темы. Если вы это сделаете, обновление темы сотрет все ваши настройки.
Давайте начнем
Первое, что я бы порекомендовал сделать, это создать собственный тип записи (CPT). Это поможет обеспечить четкое место для добавления и редактирования элементов вашего портфолио. Например, на изображении ниже вы можете видеть, что у меня есть сайт, на котором я создал CPT для проектов, публикаций, обзоров и слайдов. Это просто упрощает организацию моего контента.
Создание пользовательского типа записи
Чтобы создать CPT, поместите следующий код в файл functions.php . Следующее создаст CPT для «Проектов», но это можно изменить на что угодно. Просто измените любую ссылку на «Проект» и «Проекты» на то, что вам нужно.
//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');
Теперь, когда у нас есть CPT, перейдите на панель администратора и добавьте несколько примеров проектов, которые вы можете использовать для тестирования. Убедитесь, что вы дали ему название, отрывок и добавили избранное изображение.
После того, как вы добавите несколько примеров записей, вы захотите отобразить их в интерфейсе вашего сайта. Следующим шагом будет создание страницы, которую вы будете использовать для отображения своих проектов. Если вам не нужны никакие настройки, вы можете скопировать все из файла archive.php вашей темы и вставить в новый файл с именем archive-projects.php (archive-{post_type}.php). Тогда URL этой новой страницы будет просто http://yoursitedomain.com/projects/.
Однако, поскольку у меня обычно есть некоторые дополнительные потребности для моей страницы, я предпочитаю создавать собственный шаблон, например, projects-page.php . Если вы решите пойти по этому пути, вам нужно будет создать страницу в вашем wp-admin и назначить вашу страницу этому новому шаблону, используя «Атрибуты страницы».
В этом новом шаблоне обязательно добавьте следующее вверху:
<?php /* Template Name: Projects Portfolio */ get_header(); ?>
Убедитесь, что шаблон также содержит код get_footer внизу страницы:
<?php get_footer(); ?>
Когда у вас будет базовая основа вашего шаблона, вам нужно будет создать желаемый макет, а затем добавить код, который запрашивает ваш CPT. Убедитесь, что вы добавили следующее между get_header(); ?> get_header(); ?> и 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 ?>
Примечание. В приведенном выше запросе вы запустили цикл while. В приведенном ниже фрагменте кода мы закончим цикл while.
На данный момент вы запросили CPT, и теперь вам нужно отобразить его на своем веб-сайте. Продолжая работать с projects-page.php , добавьте следующий код сразу после кода запроса выше:
<?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 -->
В приведенном выше фрагменте вы заметите добавление тегов HTML. Эти теги управляют макетом страницы. Важно включить их в цикл while, чтобы каждый возвращаемый проект получал точно такую же структуру HTML, как и классы CSS. Приведенный выше запрос вернет контейнер <div> с классом «проект». В каждом контейнере div будет возвращено «Избранное изображение» в виде миниатюры, «заголовок» в стиле H4, отрывок проекта, а затем ссылка «Подробности» для каждого проекта, найденного в CPT «Проекты».
Примечание. Поскольку мы используем CPT, вам также потребуется добавить поддержку темы для миниатюры сообщения. Возможно, вам даже потребуется определить размеры эскиза перед использованием этого примера кода. Это будет сделано в вашем functions.php file .
add_theme_support( 'post-thumbnails', array( 'projects' ) ); // adds thumbnail support for the Projects CPT
Небольшое примечание: ваши классы HTML и CSS необходимо будет соответствующим образом скорректировать, чтобы они соответствовали дизайну вашего веб-сайта. В моем примере я использую Bootstrap для создания своего макета и создал такие классы, как project и page-wrap , которые содержат дополнительные стили.
Например, col-sm-6 col-md-3 создает макет с двумя колонками на маленьких экранах и макет с четырьмя колонками на средних и больших экранах. Если бы я не использовал Bootstrap, мне пришлось бы добавить некоторую ширину контейнера в класс проекта. Мне, вероятно, понадобится float:left , чтобы все проекты были хорошо выровнены по столбцам.
Когда закончите, ваши projects-page.php должны выглядеть примерно так:
<?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(); ?>
Создание страницы сведений о проекте
Теперь, когда у нас есть страница портфолио, нам нужно убедиться, что у нас есть страница, на которую будут переходить наши пользователи, когда они нажимают на миниатюру или ссылку «Подробности».
Для этого нам нужно будет создать в нашей теме новый шаблон с именем single-projects.php . Используя «одиночные» и краткие «проекты» CPT, WordPress использует этот шаблон для всех CPT проекта.
single-{post_type}.php
Так же, как мы делали это для projects-page.php , нам нужно будет добавить следующее:
<?php /* This is the template for displaying Single Project details */ get_header(); ?>
И внизу:
<?php get_footer(); ?>
Если у вас еще нет представления о том, как должна выглядеть эта страница, вы можете скопировать весь код из single.php вашей темы и вставить его в этот новый файл.
Ну это все! Просто так у вас есть портфолио. Давайте посмотрим, что вы построили в комментариях!