How to create a photo album on WordPress without using a plugin

How to create a photo album on WordPress without a plugin

Usually, people will use a plug-in like NextGen Gallery to achieve this effect. In addition to using third-party plug-ins, you can also use WordPress's own functions to achieve the same effect. But before that, we need to have a certain understanding of WordPress and HTML/CSS.

Final effect of photo album

Before we begin, let us first determine the final effect:

When the user clicks on the album page, the page displays different covers in a grid to represent the albums of different months. Each month we create a photo album that contains all the photos from that month.

If the user clicks on the album cover, they will see an exclusive page for the album, where you can write a little background information and list all the photos in the album.

If the user clicks on an individual photo, they can go to each photo's own page, where they can see each photo's title, information about the person who took it, and related links.

If the entire website is used to display photo albums, then you can use the default post format. But if you still have a blog, then you need to use a custom post type.

Let’s create a photo album

First you need to create a website-specific plug-in (or even a project-specific plug-in).

If you want to use a custom post, you should generate a code and paste it into the website-specific plug-in.

In order to create a grid effect, you next need to set the size of the attached image in WordPress.

For example: After setting the image size, we also need to add fields to the media upload directory. This way you can upload each image with the photographer's name and their URL.

Once this step is completed, we can continue to add albums. Upload all the pictures you want to add to the album. Then attach a different photo cover and make it the main image. You can write background information in the content column of the post.

Now that you have added several photo albums in the background, we can add code to make it run. Assuming that your custom post type is called albums, then you will create a new template folder called archive-albums.php. Paste in your desired header and footer, sidebar, and other design elements, then create a new post loop.

In that PL, we will list all attachments in the same post, but not include the thumbnails that are hyperlinked to a single page.

We will also add the main post thumbnail (i.e. album cover) separately, and then hyperlink it to a single post page (i.e. album page).

We plan to use a list method to create grid images. This program is like this:

For the main CSS style, what everyone really needs to consider is the album grid classification so that we can place each picture in the appropriate position in the grid to achieve the style we want.

Next, you need to create a new template for a single attachment. This will be the page users see going forward so they can see each image. Here users will see the title of the image, the name of the photographer and their link. Everyone is free to adjust individual templates to their liking.

There is one last thing to do now. Let’s assume that your custom post type is called album. You need to create a new single-albums.php file and put all program headers and tails, toolbars or anything else you want. Copy all design elements.

Do some basically the same processing in the loop element as in the archive album template. But before adding the main image and attachments, you also need to add an album title and description. This step can be completed by adding code, like this:

alright! You're done!

How to make a pseudo-static page in wordpress

WordPress automatically generates a real static page setting method:

The method is very simple. You only need to download and install a wordpress plug-in called cos-html-cache.

COS-HTML-Cache is a very effective WordPress page caching plugin that makes WordPress websites more responsive. Based on URL rewriting, the plug-in will automatically generate real HTML files. When a user or search engine spider visits your pseudo-static page, the plug-in will automatically update the HTML file and its related article modifications.

You can select Plug-in>Install Plug-in in the WordPress background, enter cos-html-cache and then search for the installation, and finally enable it. Or download the cos-html-cache compressed package from the WordPress website, decompress it and upload it to the /wp-content/plugins/ directory using FTP, and then enable it in the background.

After the plug-in is successfully installed and takes effect, it will not generate html static files immediately. It will automatically generate or update html files when the next time the user enters or a spider visits. If you want to quickly generate an html file and see the effect, you can use the dead link detection in the webmaster tools and imitate a spider to visit your website.

The above is the detailed content of How to create a photo album on WordPress without using a plugin. For more information, please follow other related articles on the PHP Chinese website!