Skip to content

Home

Jump to bottom
Heiko Lübbe edited this page May 11, 2024 · 35 revisions

Zitat-Service WordPress Plugin Flag of the United Kingdom

The WordPress plugin Random Quote from Zitat-Service displays a random quote from the collection of the user community zitat-service.de. The selection of quotes can be limited to one of the five languages, one of the over 500 authors, one of the over 500 categories, or the quotes set by the users themselves. We have been online since 2007, free of charge and without advertising.

Note

There is a WordPress demo site using the plugin: wp-demo.zitat-service.de

Installation

You can install the Random Quote from Zitat-Service plugin directly from WordPress Plugin Directory or by manually uploading the plugin's zip file. First click Add New Plugin in WordPress backend and then:

Afterwards activate the plugin:

plugin

Note

If the Firefox browser is used for the configuration under Microsoft Windows, the UTF-8 country flags are also displayed in the language selection.

Usage

You can insert a random quote into a post, page or other elements of your website, such as the footer, by adding a Random Quote block:

en1

You can configure the selection of quotes according to language, category, author of the quote and user who entered the quote. An asterisk * is available for all selections, which means that everything is used. For the languages you can also choose Fontend, this means the language is taken from user frontend. If the language is not supported is falls back to English. The following sample shows quotes from the categoy Dance in the English language.

en2

Styling

You can design the quote in many different ways. Firstly, you can use the standard functions of the block editor for style such as colour, typography and dimensions. The following example uses the background colour RGB AAFF0033 and inner spacing 1:

styling_1

Secondly, you can also use the formatting of the WordPress Quote block. First insert a Quote block and then a Random Quote block inside it. With the Twenty Twenty-Four theme, the outer Quote block uses italic text and rounded corners. The following example also has the background colour RGB 00FFFF33 and Align text center set:

styling_2

Thirdly, you can use Cascading Style Sheets (CSS). The DIV element of the quote class encloses the entire quote, for example to set a margin. It contains the DIV elements quotation for the actual quote and source for the author and source. In the following example, the standard decoration of the link (blue and underlined) is removed and the quote is displayed in black. The source (whether with or without a link) is then displayed in grey. Overall, we have a light grey background and a 1 pixel wide border with round corners:

styling_3

To do this, in the WordPress backend: Appearance | Editor | 🔍 | type CSS | and choose Customize CSS

Add and save the following lines:

div.quote {
  border: 1px solid black;
  border-radius: 1em;
  padding: 1em;
  background: #eee;
  text-align: justify;
}
div.quote * a {
  text-decoration: none;
  color: black;
}
div.quote div.source, div.quote div.source a {
  color: gray;
}

API zitat-service.de

The Joomla module fetches all data from api.zitat-service.de. Terms of use and privacy statement can be found in the Imprint.

Retrieving the quotes in a WordPress website is done by PHP code running on the WordPress server. This means that the process of retrieving quotes does not involve any tracking or recording of user-specific data on the frontend. Instead, it takes place within the server environment, which protects user privacy and ensures compliance with policies that prohibit tracking users without their consent.

The quotes displayed, along with their respective authors and sources, are linked to external websites such as zitat-service.de and Wikipedia to provide users with additional context and information. All external links are only activated after manual review by the admin team of zitat-service.de to avoid abuse of linked content.

Error Situations

Error fetching quote

If fetching the quote from api.zitat-service.de has a problem, this error is displayed. By example in playground.wordpress.net environment where the PHP server backend does not support network connections:

Error fetching quote

👉 Check network connectivity on server side.

404 – No quote found for given parameters

The parameters are AND-combined. If you combination result in no quote there is an error.

The parameters are combined in such a way that all conditions must be met. If your combination of parameters does not find any quotes, this error is shown. For example there are no quotes from Douglas adams in the Agriculture category:

Error: 404 – No quote found for given parameters: categoryId=151 (Agriculture), authorId=345 (Douglas Adams).

👉 Choose asterix * for Category to show quotes from Douglas Adams.

... (No quote is present)

There is a placeholder ..., in case of trouble the three dots are not replaced by the random quote:

...

👉 Check browsers developer console for the api.zitat-service.de network request and enable JavaScript debugging.

This block has encountered an error and cannot be previewed.

Is there are problems with the block in the backends block editor, the random quote block shows:

This block has encountered an error and cannot be previewed.

👉 Delete and recreate the block. Or check block source code with Code Editor mode instead of the standard Visual Editor mode. Or enable JavaScript debugging.

Enable JavaScript debugging

In the browsers JavaScript console run the following command:

> localStorage.setItem('debugMode', 'true');

👉 Within the JavaScript console you can now check console.log and console.error messages from Random Quote from Zitat-Service plugin.

You can deactivate the console messages again in the JavaScript console with:

> localStorage.removeItem('debugMode');

Tickets

Is there a bug or is an improvement needed? Please create a GitHub Issue. 👍

Clone this wiki locally