未加星标

Create a WordPress Image Gallery: Code the Plugin

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

Create a WordPress Image Gallery: Code the Plugin
What You'll Be Creating

People like pictures. They like looking at them, they like clicking on them. So it makes sense to use them in the navigation for your site.

You may already use featured images in your archive pages, letting users get a greater insight into what a post is about and making your archive pages look better. The nice big clickableimage also makes the process of navigating through to a page or post more intuitive.

But there are other places where you can use featured images to aid navigation to parts of your WordPress site. In this two-part tutorial, we'll show you how to create a grid of images which link to the child pages of a given page in your site, or to the child pages of the current page.

In this first part, I'll demonstrate how to write thephp to fetch the pages and output their titles and featured images, inside links. And in the second part, Ian Yates will show you how to add CSS to turn your list into a great-lookinggrid.

What You'll Need

To follow along with this tutorial, you'll need the following:

A development installation of WordPress―don't add this to your live site until you've tested it. A theme which either has action hooks for you to add content or which you canedit. If it's a third party theme without hooks,create a child theme and edit that. A code editor. Deciding On Your Approach

The first thing to do is decide which pages you want to output. In this tutorial, I'll demonstrate two options:

A list of the child pages of the current page, with images A list of the child pages of a specific page, with images. This can display anywhere in your site, not just on the parent page. Getting Started

The starting point is the same for both approaches.

Start by creating a plugin in your wp-content/plugins folder. You'll need to create a folder for your plugin, as in the secondpart of this tutorial, you'll be adding a stylesheet as well as the main plugin file.

Once you have your folder, create a PHP file for your code. I'm calling mine tutsplus -child-pages.php .

Now set up your plugin file with thecommented-out text at the top:

/**
* Plugin Name: Tutsplus List Child Pages
* Plugin URI: https://github.com/rachelmccollin/tutsplus-list-child-pages
* Description: Output a list of children of the current page or a specific page with featured images.
* Author: Rachel McCollin
* Author URI: https://rachelmccollin.com
* Version: 1.0
* Text Domain: tutsplus
* License: GPLv2.0+
*/

This tells WordPress what your plugin isand what it does.

Now if you haven't already, go ahead and create some pages. I'll create some pages with child pages, including a Locations Page as the parent for my specific page list.

Here are my pages in the admin:


Create a WordPress Image Gallery: Code the Plugin

Now it's time to write the function to output the list.

Outputtinga List of Children of the Current Page

Let's start with this option. This will output a list of all of the children of the current page, with images, links and the title.

This is a useful approach if your site has a hierarchical page structure, and you want to encourage people visiting top-level pages (or middle-level pages, if you have them) to visit the pages beneath them in the structure.

Start by creating a function in your plugin file:

function tutpslus_list_current_child_pages() {
}

Now inside that function, check if we're on a page. Everything else will go inside that conditional tag:

if ( is_page() ) {
}

Next, set up the $post global variable anddefine the parent page:

global $post;
// define the page they need to be children of
$parentpage = get_the_ID();

After that, define the arguments for the get_pages() function:

// define args
$args = array(
'parent' => $parentpage,
'sort_order' => 'ASC',
'sort_column' => 'menu_order',
);
$children = get_pages( $args );

You may want to change some of those arguments. I've used menu_order for sorting so I can manually adjust this, but you could use date, title, or any other sortable parameter.

The next task is to set up a foreach loop using the results of that get_pages() function:

if ( $children ) { ?>
<div class="child-page-listing">
<h2><?php _e( 'Learn More', 'tutsplus' ); ?></h2>
<?php //foreach loop to output
foreach ( $children as $post ) {
setup_postdata( $post ); ?>
<article id="<?php the_ID(); ?>" class="child-listing" <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ) { ?>
<a class="child-post-title" href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
<div class="child-post-image">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'medium' ); ?>
</a>
</div>
<?php } ?>
</article>
<?php } ?>
</div>
<?php }

Let's run through that code:

First we're checking if the get_pages() function has returned any results, i.e. if $children is populated. Then we start a foreach loop for each child page as the $post variable, Within that loop, we open an article element. We check if there's a featured image (or post thumbnail) and output it inside a link to the page. We then output the title of the page inside a link to it. Finally we close our elements and conditional checks and the foreach loop itself.

I've added CSS classes to each element so we can style these in the second part of this tutorial.

Adding The Code to The Theme

Now you have your function. The next step is to add it to your theme, so that it can be output in the correct place.

If your theme has action hooks, you can hook your function to one of those. So if mine had an after_content hook, I could add this code in my plugin, outside the function:

add_action( 'after_content', 'tutpslus_list_current_child_pages' );

However I'm using the Twenty Sixteen theme for this demo, which doesn't have action hooks like this. So instead I'll need to add my function directly in a template file.

If you're working with your own theme, you can add this into the page.php file at the point where you want the list to be displayed.

But if you're using a third party theme, you mustn't edit it, because all your changes will be lost next time you update the theme. Instead, create a child theme. Create a copy of the page.php file from your parent theme (or a copy of the loop file for page.php )in the new cild theme and edit that instead.

Identify where in your page you want the list to be output and add this to your theme template file:

tutpslus_list_current_child_pages();

I've added it after the loop in my child theme's page.php file.

Now let's take a look at the site. Here's my About Us page with its child pages:

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

分页:12
转载请注明
本文标题:Create a WordPress Image Gallery: Code the Plugin
本站链接:https://www.codesec.net/view/611804.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(14)