內容簡介
拉引文對於內容長且文字密集的文章非常適用。它們可以幫助閱讀的人快速了解核心內容,也有助於視覺上分割長段的文字。然而,當您的文章內容在 CSS 的控制下顯示時(例如在RSS閱讀器中),直接在文章內容中編碼拉引文可能會變得難看且令人困惑。
為解決此問題,此外掛創造了 WP 短代碼(shortcodes),您可以使用這些短代碼來指示文字片段,並指明在文章中想要顯示的位置。當在一個支援 javascript 的瀏覽器中查看文章時,拉引文將會在指定的位置插入。然而,當在 RSS 閱讀器中查看時,拉引文將不會出現。
只需要使用 WP 短代碼 ([pullthis]和[pullshow]) 指示您想要出現的文字和位置,就可以讓此外掛在每個頁面載入時使用 javascript 插入拉引文。
範例 #1:單一拉引文
使用[pullthis]和[/pullthis]包裹您的拉引文,並在您想要拉引文出現的位置上使用[pullshow]:
[pullshow]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [pullthis]這是我的第一則拉引文。
Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam.
範例 #2:多個拉引文
使用 id 屬性即可建立多個拉引文,其值可以是任何你想要的值。
[pullshow id="aliquam"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [pullthis id="aliquam"]Aliquam sit amet felis.[/pullthis] Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam.
[pullshow id="donec"]Morbi blandit mollis magna. Suspendisse eu tortor. [pullthis id="donec"]Donec vitae felis nec ligula blandit rhoncus.[/pullthis] Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non,imperdiet ac, ante. Morbi sit amet mi. Ut magna.
範例 #3:僅顯示拉引文
如果您只想讓某個內容以拉引文的方式出現,您可以將pullthis添加display屬性,並將其設置為outside:
[pullshow id="ex3"]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. [pullthis id="ex3" display="outside"]This sentence will be hidden inside the paragraph and only show as a pull quote.[/pullthis]
在這種情況下,原始的pullthis文字仍然存在HTML中,但它被使用CSS隱藏起來(display:none)。
外掛標籤
開發者團隊
原文外掛簡介
Pull quotes are nice for long, text-heavy posts. They help you communicate your key points to skimmers and they visually help to break up long chunks of text. However, in situations where your post content is displayed with CSS beyond your control (such as in a feed reader), pull quotes that are hard-coded into your post content can be ugly and confusing.
To solve this problem, this plugin creates shortcodes you can use to indicate snippets of text that you would like to use as a pull quote and indicate where you want it to show up in the post as well. When viewing the post on your website in a javascript-capable browser, the pullquotes will be inserted with javascript in the specified place. However, when viewed in a feed reader, for example, the pullquotes will not appear.
Just indicate text you want to appear in a pullquote and where you want it to appear (using WP shortcodes: [pullthis] and [pullshow]) and the plugin will insert the pullquotes using javascript on each page load.
Example #1: A Single Pull Quote
Wrap your pullquote in [pullthis] and [/pullthis] and use [pullshow] where you want the pull quote to show up:
[pullshow]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [pullthis]This
is my first pull quote.[/pullthis] Aliquam sit amet felis. Etiam congue. Donec
risus risus, pretium ac, tincidunt eu, tempor eu, quam.
Example #2: Multiple Pull Quotes
You can have multiple pull quotes by using the id attribute. It can have whatever value you want.
[pullshow id="aliquam"]Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. [pullthis id="aliquam"]Aliquam sit amet felis.[/pullthis] Etiam congue. Donec
risus risus, pretium ac, tincidunt eu, tempor eu, quam.
[pullshow id="donec"]Morbi blandit mollis magna. Suspendisse eu tortor. [pullthis
id="donec"]Donec vitae felis nec ligula blandit rhoncus.[/pullthis] Ut a pede ac
neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non,
imperdiet ac, ante. Morbi sit amet mi. Ut magna.
Example #3: Only Show The Pull Quote
What if you want something to only appear in a pull quote? You can add the display attribute to pullthis and set it to outside:
[pullshow id="ex3"]Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet
felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor
eu, quam. Morbi blandit mollis magna. [pullthis id="ex3"
display="outside"]This sentence will be hidden inside the paragraph and
only show as a pull quote.[/pullthis]
In this case, the orignal pullthis text is still there in the HTML, but it’s hidden with CSS (by setting display: none on the text).
