wordpress 自定义_在几分钟内用纯wordpress构建自定义档案页面
wordpress 自定义
An archives page is a dedicated location on your WordPress site where you can group your content and put it on display for viewers, allowing you to bring together all of your old posts onto one page.
存档页面是WordPress网站上的专用位置，您可以在其中将内容分组并显示给查看者，使您可以将所有旧帖子集中到一个页面上。
The goal of this tutorial is to show how to build a minimal archives page in plain WordPress without the need of a plugin. The custom archives page we are about to build will group our posts by year and month. It will also give users the ability to find articles by title.
本教程的目的是展示如何在无需插件的情况下以纯WordPress构建最小的存档页面。 我们将要建立的自定义档案页面将按年份和月份对帖子进行分组。 它还将使用户能够按标题查找文章。
Here’s a sneak peek at what our archives page will look like:
这是我们档案页面的外观：
1.定义自定义档案页面模板 (1. Defining a Custom Archives Page Template)
First of all, we need to define a custom template for our archives page. To do this, create and upload a file called archives.php to your current theme directory. This will contain the following code:
首先，我们需要为存档页面定义一个自定义模板 。 为此，创建一个名为archives.php的文件并将其上传到当前主题目录。 这将包含以下代码：
<?php
/*
* Template Name: Archives
*/
?>
<?php
add_action('wp_enqueue_scripts', 'add_archives_dependencies');
function add_archives_dependencies() {
$js_path = get_template_directory_uri() . '/assets/js/archives.js';
$css_path = get_template_directory_uri() . '/assets/css/archives.css';
// 'wp-util' is a required dependency
wp_enqueue_script( 'archives', $js_path, [ 'wp-util' ]);
wp_enqueue_style( 'archives', $css_path);
}
?>
<?php get_header(); ?>
<div class="container">
<h2><?php the_title(); ?></h2>
<form>
<p class="search-title">Search this site:</p>
<p class="search-input">
<input type="text" class="input-box" id="search-input"/>
</p>
</form>
<div class="results" id="results">
</div>
</div>
<?php get_footer(); ?>The goal of the custom add_archives_dependencies function is to import archive.js and archive.css (which we will see later on) into our archives page. This is achieved by employing the following two functions: wp_enqueue_script and wp_enqueue_style.
自定义add_archives_dependencies函数的目标是将archive.js和archive.css (我们将在后面看到)导入到我们的归档页面。 这可以通过使用以下两个函数来实现： wp_enqueue_script和wp_enqueue_style 。
As we can see in the animated GIF, the search feature does not reload the page. This means that AJAX technologies are used. To make an AJAX call, we need to add an extra dependency to the page. This dependency is wp-util, which is enqueued along with archives.js.
正如我们在动画GIF中看到的那样，搜索功能不会重新加载页面。 这意味着使用了AJAX技术。 要进行AJAX调用，我们需要在页面上添加一个额外的依赖项。 此依赖项是wp-util ，它与archives.js一起入队。
2.创建脚本和样式文件 (2. Creating the Script and Style File)
Now, we are going to create the aforementioned files: archives.js and archives.css. The former aims to implement the search function, while the latter makes the archives page looks stylish.
现在，我们将创建上述文件： archives.js和archives.css 。 前者旨在实现搜索功能，而后者则使档案页面看起来时尚。
html,
body,
div,
h2,
h3,
h4,
p,
form {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
input {
vertical-align: middle;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: nunito-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
background-color: #ffffff;
color: #333;
font-size: 18px;
line-height: 1.25em;
font-weight: 300;
}
p {
line-height: 1.5em;
margin-bottom: 1em;
}
a:link,
a:visited,
a:hover {
color: #333;
text-decoration: none;
border: none;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
a:hover {
color: #aaa;
}
h2,
h3,
h4 {
font-weight: 300;
text-align: center;
line-height: 1.25;
}
h2 {
font-size: 2em;
margin: 2.5em 0 1.25em 0;
text-align: center;
}
h3 {
font-size: 1.5em;
margin: 2em 0 1em 0;
text-align: center;
}
h4 {
font-size: 1em;
}
.container {
overflow: hidden;
max-width: 50%;
margin: 0 auto;
padding: 0 2.5em;
}
p.search-title {
text-align: center;
font-weight: 400;
}
form input.input-box {
width: 94%;
height: 30px;
font-size: 18px;
padding: 10px 15px;
border: 1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
form input.input-box:hover {
border: 1px solid #aaa;
}
form input.input-box:focus {
outline: none;
border: 1px solid #333;
}
.results {
margin-bottom: 5em;
}
.day p,
.month h4 {
font-weight: 400;
}
.month h4 {
margin: 2em 0 1em 0;
}
.day p,
.post-title p {
margin-bottom: 0;
}
.day p {
padding-right: 60px;
width: max-content;
}
.day-title {
display: flex;
align-items: flex-start;
border-bottom: 1px solid #eee;
padding: 10px 0;
}
@media screen and (max-width: 800px) {
.container {
max-width: 70em;
margin: 0 auto;
padding: 0 1.5em;
overflow: hidden;
}
h2,
h3,
h3,
.month h4,
p.search-title {
text-align: left;
}
h2 {
font-size: 2em;
margin: 2em 0 1em 0;
}
}
@media only screen and (max-device-width: 480px) {
h2, h3, h3, .month h4, p.search-title {
text-align:center;
}
}
@media print {
body {
font-family: Helvetica, sans-serif;
font-size: 14px;
background: white;
color: black;
margin: 10px;
width: auto;
}
.container {
display: block;
}
}
@media all and (min-width:320px) and (max-width:667px) {
::-webkit-scrollbar {
display: none;
}
}As you can see based on how these files are referenced in archives.php, we uploaded these files to assets/js and assets/css of our current theme directory respectively. Feel free to place these two files wherever you want, but do not forget to update archives.php accordingly.
如您所见，基于archives.php中如何引用这些文件，我们将这些文件分别上传到当前主题目录的assets/js和assets/css 。 可以将这两个文件随意放置在任意位置，但不要忘记相应地更新archives.php 。
As we do not want our search function to suffer from performance issues, we used the debouncing technique. This way, we ensured that the AJAX call is not made too frequently, which is a good way to limit the number of HTTP requests.
由于我们不希望搜索功能遭受性能问题的困扰，因此我们使用了反跳 技术 。 这样，我们确保AJAX调用不会过于频繁，这是限制HTTP请求数量的好方法。
As you can see, in archives.js we used the function: wp.ajax.post. This is one of the wp-util helpers and allowed us to make the AJAX call to retrieve the required data to populate the archives page.
如您所见，在archives.js中，我们使用了函数： wp.ajax.post 。 这是wp-util帮助者之一，它使我们能够调用AJAX来检索所需数据以填充存档页面。
3.更新Functions.php (3. Updating Functions.php)
In the wp.ajax.post function call we passed “get_archives_data” as a parameter. That string represents the name of an action that I will show you how to properly register. To do this, append the following lines of code to functions.php:
在wp.ajax.post函数调用中，我们传递了“ get_archives_data”作为参数。 该字符串代表动作的名称，我将向您展示如何正确注册。 为此，请将以下代码行添加到functions.php ：
<?php
// ...
add_action( 'wp_ajax_nopriv_get_archives_data', 'get_archives_data' );
add_action( 'wp_ajax_get_archives_data', 'get_archives_data' );
function get_archives_data() {
global $wpdb, $wp_locale;
$search = isset( $_POST["search"] ) ? $_POST["search"] : "";
$query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) as `month`, DAYOFMONTH(post_date) as `dayofmonth`, ID, post_name, post_title FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish' AND post_title LIKE '%$search%' ORDER BY post_date DESC";
$results = $wpdb->get_results($query);
$ajax_response = [];
foreach ( $results as $result ) {
$result->month_name = $wp_locale->get_month($result->month);
$result->encoded_title = strip_tags(apply_filters('the_title', $result->post_title));
$ajax_response[] = $result;
}
wp_send_json_success($ajax_response);
}Please note: if your current theme does not have a functions.php file, you have to create one before appending the lines of code onto it.
请注意 ：如果您当前的主题没有functions.php文件，则必须先创建一个主题，然后再在其上附加代码行。
With these lines, we defined an AJAX endpoint thanks to the add_action function and wp_ajax hook. When reached, it returns the data required to populate the archives page (retrieved with a custom query and sent with the wp_send_json_success function).
通过这些行，我们通过add_action函数和wp_ajax钩子定义了一个AJAX端点。 到达后，它将返回填充档案页面所需的数据(使用自定义查询检索并通过wp_send_json_success函数发送)。
4.创建档案页面 (4. Creating the Archives Page)
Now, it is time to create the custom archives page. Go to your WordPress admin panel and add a new page (Pages » Add New). As you can see in the GIF, we called this page “Archives” but you are free to give it the name that you prefer.
现在，该创建自定义存档页面了。 转到WordPress管理面板，然后添加一个新页面(页面»添加新页面)。 正如您在GIF中所看到的，我们称此页面为“ Archives”，但您可以随意为其命名。
On the right-hand side of your screen, you should see a meta box called “Page Attributes”. Click on the drop-down menu below the “Template” field and choose “Archives” as your page template.
在屏幕的右侧，您应该看到一个名为“页面属性”的元框 。 单击“模板”字段下方的下拉菜单，然后选择“归档”作为页面模板。
Choose a permalink, save, and publish the page.
选择一个永久链接 ，保存并发布页面。
Et voila! Your custom archives page is ready to be visited!
瞧！ 您的自定义档案页面随时可以访问！
结论 (Conclusion)
The source code of his article can be found in my GitHub repository.
他的文章的源代码可以在我的GitHub存储库中找到。
Allowing users to see all your posts in one elegant page is a great feature to add to your WordPress website. This article explored how to achieve this result, as well as how to provide the necessary code to implement a useful search function to help users find the content that interests them quickly.
允许用户在一个优雅的页面中看到您所有的帖子是添加到您的WordPress网站的一项很棒的功能。 本文探讨了如何获得此结果，以及如何提供必要的代码来实现有用的搜索功能，以帮助用户快速找到他们感兴趣的内容。
I hope that you found this article helpful, thanks for reading! Feel free to reach out to me for any questions, comments, or suggestions.
希望本文对您有所帮助，感谢您的阅读！ 如有任何问题，意见或建议，请随时与我联系。
翻译自: https://codeburst.io/build-a-custom-archives-page-in-plain-wordpress-in-minutes-910258a5884c
wordpress 自定义
上一篇： 编译Seetaface python版出现的问题，解决办法
下一篇： 编译redis失败的解决办法