內容簡介
此外掛程式使用後端的一些 PHP 膠合劑和前端的 JavaScript,來實現 WordPress 儲存庫的「Humanized History」功能。在啟用 JavaScript 的瀏覽器中,Humanized History 取消了使用者通過點擊「前一篇文章」連結來查看儲存庫的需求。相反地,當使用者靠近當前文章頁面的底部時,所包含的 JavaScript 會自動在頁面底部為他們顯示更多的文章,提供魔法無限滾動條,以代替傳統的分頁方式。
搜尋機器人和未啟用 JavaScript 的瀏覽器將看到同樣的舊頁面,並帶有先前頁面 / 下一頁面連結,因此在可訪問性和對搜索引擎的友好度方面,您什麼也不會失去。
此外掛程式在 Aza Raskin 的致「Humanized (2006-04-25)」上的討論中啟發了這一概念。要看在 WordPress 中實現的此功能範例,請轉到http://projects.radgeek.com/並向下滾動至頁面底部。
不要讓您的讀者要求更多內容。直接提供給他們。
範本和樣式
如果您的index.php和archive.php範本在內容底部提供先前頁面 / 下一頁面連結,則您可能需要從範本中刪除這些連結。插件會自動在首頁和儲存庫頁面底部提供先前頁面 / 下一頁面的連結。
許多 WordPress 範本(包括默認的「Kubrick」範本)會根據是否位於儲存庫或搜索結果中而以不同方式顯示文章,例如,「Kubrick」在搜索結果中不會顯示文章內容。如果您想保留不同的格式來顯示儲存庫與搜索結果,則在template_post_display()函數中使用以下代碼之類的代碼:
function template_post_display () {
if (is_search()) {
// display post for paged search results
} else {
// display post for paged archives
}
}
您可能還想在範本的樣式表中添加一些樣式,以用於插件自動生成的導航連結。以下是我用來顯示「舊文章」連結的內容(位於內容欄的最左側),以及在同一行上的「新文章」連結(位於最右側)的樣式:
#content .navigation {
display: block; position: relative; list-style: none;
text-align: center;
margin-top: 10px; margin-bottom: 60px; margin-left: 0px; margin-right: 0px;
padding: 0;
}
#content .navigation .prev {
display: block; position: relative; list-style: none;
top: 0; bottom: auto; left: 0; right: auto; width: 45%;
margin: 0; padding: 0;
text-align: left;
}
#content .navigation .next {
display: block; position: absolute; list-style: none;
top: 0; bottom: auto; left: auto; right: 0; width: 45%;
margin: 0; padding: 0;
text-align: right;
}
如果您要更改「為您獲取更多內容」的外觀,則需要在樣式表中添加其他樣式。
外掛標籤
開發者團隊
② 後台搜尋「Humanized History for WordPress」→ 直接安裝(推薦)
📦 歷史版本下載
原文外掛簡介
This plugin implements a “Humanized History” feature for WordPress
archives, using some PHP glue on the back end and some unobtrusive
JavaScript on the front-end. In JavaScript-enabled browsers, Humanized
History eliminates the need for users to click on “previous posts” links to
read back through your archives; instead, when users get near the bottom of
the current page of posts, the included JavaScript automatically displays
more posts for them at the bottom of the page, providing a magic endless
scrollbar that scrolls through your entire archives, in place of traditional
page chunking.
Search robots and browsers without JavaScript enabled will see the same old
pages with previous page/next page links, so you lose nothing in accessibility
or friendliness to search engines.
The plugin was inspired by the discussion of the concept by Aza Raskin at
Humanized (2006-04-25): No More Pages?. To see a sample of the feature as
implemented in WordPress, go to http://projects.radgeek.com/ and scroll down
toward the bottom of the page.
Don’t make your readers ask you for more content. Just give it to them.
Templates and Styling
If your index.php and archive.php templates provide previous page / next
page links at the bottom of the content, you will probably want to remove these
links from your templates. The plugin automatically provides its own previous
page / next page links at the bottom of the front page and archive pages.
Many WordPress templates (including the default “Kubrick” template) display
posts differently depending on whether they are in archives or in search
results. “Kubrick,” for example, doesn’t display the post’s contents in search
results. If you want to keep different formats for displaying archives as
against search results, then use code something like this in your
template_post_display() function:
function template_post_display () {
if (is_search()) {
// display post for paged search results
} else {
// display post for paged archives
}
}
You may also want to add some styling to your template’s stylesheet for the
navigation links that the plugin automatically generates. Here is what I use to
display the “older posts” link at the far left side of the content column, and
the “newer posts” link at the far right side on the same line:
#content .navigation {
display: block; position: relative; list-style: none;
text-align: center;
margin-top: 10px; margin-bottom: 60px; margin-left: 0px; margin-right: 0px;
padding: 0;
}
#content .navigation .prev {
display: block; position: relative; list-style: none;
top: 0; bottom: auto; left: 0; right: auto; width: 45%;
margin: 0; padding: 0;
text-align: left;
}
#content .navigation .next {
display: block; position: absolute; list-style: none;
top: 0; bottom: auto; left: auto; right: 0; width: 45%;
margin: 0; padding: 0;
text-align: right;
}
If you want to change the appearance of the “Getting more content for you…”
status indicator, then add a rule to your CSS stylesheet for the class
humanized-history-getting-more. E.g., to create a dark translucent box that
floats over the footer material below:
.humanized-history-getting-more {
position: absolute;
width: auto; height: auto;
border: 3px solid #505050;
padding: 0.25em 1.0em;
background-color: #777777;
opacity: 0.85;
z-index: 10000;
}
Feedback
Comments, questions, applause, brickbats, and bug reports should be directed to
Charles Johnson at [email protected]. Other ways to get in touch with
me can be found through my web page at http://radgeek.com/contact. If you have
a bug or odd behavior to report, please be sure to include as much of the
following information as you can ascertain:
The version of the Humanized History plugin you are using
The version of WordPress you are using
The version of PHP that you are using
Enjoy!
License
The Humanized History for WordPress plugin is copyright © 2007-2008 by Charles
Johnson. This program is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the Free
Software Foundation; either version 2 of the License, or (at your option) any
later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE. See the GNU General Public License for more details.
