Theme-Installation

Das Inis-B-Theme könnt Ihr Euch bei GitHub herunterladen

Ihr könnt das ZIP-File entweder entpacken und per FTP in den Themes-Ordner Eurer Installation legen (wp-content/themes).
Oder Ihr installiert das Theme über den Admin-Bereich unter Design >> Themes. Direkt neben der Überschrift findet Ihr die Buttons „Theme hinzufügen“ (den Button anklicken) und dann „Theme hochladen“. Dort könnt Ihr die ZIP-Datei direkt hochladen.

Ihr benötigt außerdem noch das Plugin „Advanced Custom Fields“. Dieses Plugin ist einfach unter Plugins >> Installlieren über das WordPress-Plugin-Verzeichnis zu installieren

Falls Ihr das Theme automatisch updaten wollt, könnt Ihr das Plugin „GitHub Updater“ installieren

Customizer

Die meisten Theme-Einstellungen werden im Customizer vorgenommen (zu finden unter Design > Customizer).

---

Website-Informationen
In diesem Bereich können Seitentitel, Seitenbeschreibung, Favicon und das Logo im Header festgelegt werden.

Besonders sind die beiden Eingabefelder für den Bannertext (erscheint rechts oben im Header) und die Checkbox für die Webseitenaktivierung.

Solange diese Checkbox nicht aktiv ist, können Besucher die Webseite nicht besuchen. Nur eingeloggte Nutzer haben Zugriff auf die gesamte Webseite.

---

Theme Optionen
In diesem Bereich können Schriftarten, Farben und ein Hintergrundbild für den Header festgelegt werden. Außerdem besteht die Möglichkeit besondere Post Types für Mitglieder, Projekte und einen internen Bereich zu aktivieren.

Die Post Types Mitglieder und Projekte können dann über die Shortcodes members-accordion und projects-accordion ausgegeben.

Der Post Type Interner Bereich benötigt eine Login-Seite mit dem Shortcode login, die über den Customizer zugewiesen werden muss. Der interne Bereich ist dann über den Link https://www.deine-domain.de/intern/ erreichbar.

Damit Besucher auf den internen Bereich über den Login zugreifen können, muss noch ein Benutzer mit der Rolle „Abonnent“ angelegt werden. Über diesen Benutzer können dann Besucher ohne eigenen Nutzeraccount auf den internen Bereich zugreifen.

Block-Stile

---

Toggle/Accordion

Eine Überschriftenliste mit ausklappbaren Inhalten kann wie folgt erzeugt werden.

1. Überschrift über die Block-Stile als Überschrift Toggle/Überschrift Toggle Boxed definieren.
2. Den auszuklappenden Inhalt über den letzten Button in der Toolbar gruppieren. Diese Gruppe muss direkt auf die oben definierte Überschrift folgen.

Alle Elemente innerhalb der Gruppe werden dann auf- und zugeklappt.

Shortcodes

Shortcodes stellen Euch erweiterte Funktionalitäten (wie Artikellisten, Newsletterformulare, etc.) zur Verfügung.
Die Shortcodes werden in der beispielhaft gezeigten Form in den Shortcode-Block eingefügt.
Mehr Informationen zu dem Thema Shortcode API findet Ihr in der WordPress-Dokumentation.

Die Optionen bei festen Attribut-Werten werden durch einen Pipe | getrennt. Der erste Wert ist der Default-Wert. Das Attribut muss im Shortcode nicht angegeben werden, wenn der Default-Wert gewünscht ist.

---

mail verschlüsselt eine E-Mailadresse.
Attribute:

• address: Die zu verlinkende E-Mailadresse
• linktext: Verlinkter Text, ansonsten wird die E-Mailadresse als Link angezeigt
• linkicon: URL eines verlinkten Icons
• prefix: Textzeichen vor dem verlinkten Text
• display: inline | block
• class: Individuelle Link-CSS-Klasse

[mail address="adresse@deine-domain.de"]

---

newsletter setzt ein Newsletter-Formular ein.
Attribute:

• type: mailchimp | newsletter2go
• id: Die ID der Mailingliste
• user: Die ID des Mailchimp-Benutzers
• list_url: Die URL der Mailchimp-Mailingliste
• show_firstname: true | false
• show_lastname: true | false
• use_placeholder: false | true

Beispiel für Mailchimp

[newsletter list_url="https://listenurl.mailchimp.com" user="deineUserID" id="deineListenID"]

Beispiel für Newsletter2go

[newsletter type="newsletter2go" id="deineListenID"]

---

login setzt ein Login-Formular für den interen Bereich ein.

[login]

---

sharer setzt einen Teilen-Button ein.
Attribute:

• id: Die aktuelle Post ID, wird automatisch gesetzt
• align: center | left | right
• display: block | inline
• button_text: Teilen | Text auf dem Button

[sharer align="left"]

Cookies & Cookie-Notice

cookies_accepted blendet Inhalte ein, wenn Cookies akzeptiert wurden.
Funktioniert nur mit dem Plugin „Cookie Notice for GDPR“ (de.wordpress.org/plugins/cookie-notice/)

[cookies_accepted]Dein Inhalt[/cookies_accepted]

---

cookies_not_accepted blendet Inhalte ein, wenn Cookies nicht akzeptiert wurden.
Funktioniert nur mit dem Plugin „Cookie Notice for GDPR“ (de.wordpress.org/plugins/cookie-notice/)

[cookies_not_accepted]Dein Inhalt[/cookies_not_accepted]

---

cn-status stellt den Cookie-Status da.
Funktioniert nur mit dem Plugin „Cookie Notice for GDPR“ (de.wordpress.org/plugins/cookie-notice/)

[cn-status]

Artikellisten

post-list generiert ein Postliste.
Attribute:

• type: post | page | member | project | internal
• post_status: publish | siehe Dokumentation der WP_Query Klasse
• orderby: date | siehe Dokumentation der WP_Query Klasse
• order: DESC | ASC
• meta_key: Der Name des Custom Fields, wenn orderby auf meta_value gesetzt ist
• id: Die ID eines einzelnen Posts
• cat: Die IDs einer oder mehrer Kategorie/n, getrennt mit einem Komma, ohne Leerzeichen
• exclude_cat: Die IDs einer oder mehrer Kategorie/n, getrennt mit einem Komma, ohne Leerzeichen
• posts_per_page: -1 | Der Wert -1 stellt alle Posts dar, möglich ist die jeder ganzzahlige, positive Wert
• layout: post-list | subpages
• width: alignnormal | boxed
• month_header: true | false
• letter_header: false | true
• offset_header: false | true
• get_offset_varname: letter | Der Name für die GET-Variable in der URL
• offset_archive_link: Die URL des Postarchivs

[post-list type="project" orderby="menu_order" order="ASC"]

---

page-teaser setzt einen Teaser zu einer Seite ein.
Attribute:

• id: ID der anzuzeigenden Seite

[page-teaser id="seitenID"]

---

accordion-list generiert ein Postliste mit Accordion.
Attribute:

• post_type: member | post | page | project | internal
• orderby: meta_value | siehe Dokumentation der WP_Query Klasse
• order: ASC | DESC
• meta_key: member_sort | Der Name des Custom Fields, wenn orderby auf meta_value gesetzt ist
• cat: Die IDs einer oder mehrer Kategorie/n, getrennt mit einem Komma, ohne Leerzeichen
• exclude_cat: Die IDs einer oder mehrer Kategorie/n, getrennt mit einem Komma, ohne Leerzeichen
• layout: show-toggle | no-toggle
• width: normal | boxed
• thumbsize: thumbnail | medium | large | full | eigene Bildergrößen aus dem Child-Theme
• grayscale: grayscale-active | no-grayscale

[accordion-list type="post" orderby="date" order="DESC"]

---

members-accordion generiert eine Accordion-Liste für Mitglieder.
Default Attribute:
siehe accordion-list. Attribut post_type entfällt.

[members-accordion]

---

projects-accordion generiert eine Accordion-Liste für Projekte.
Default Attribute:
siehe accordion-list. Attribut post_type entfällt.

[projects-accordion]

Ersetzt durch Funktionen im Block Editor

small gibt Text in einer kleineren Schriftgröße aus

Ersetzt durch die Schriftgrößenauswahl im Absatz-Block

Attribute:

• display: block | inline

[small]Dein kleiner Text[/small]

---

line gibt eine Linie aus

Ersetzt durch den Trennzeichen-Block

[line]

---

divider erzeugt einen Abstand

Ersetzt durch den Abstandshalter-Block

Attribute:

• height: Höhe in Pixel ohne den Zusatz px

[divider height="30"]

---

link-list wandelt eine <ul> in eine Link-Liste um.

Ersetzt durch die Listen-Styles Download List und Download List Boxed

Attribute:

• class: download-list | CSS-Klasse für die

[link-list]</p>
<ul>
<li>Listeneintrag</li>
</ul>
<p>[/link-list]

---

button erzeugt einen Button

Ersetzt durch den Button-Block

Attribute:

• size: medium | big | small
• visible: normal | desktop | mobile
• display: block | inline

[button]<a href="https://deine-domain.de">Dein Linktext</a>[/button]

Child Theme einrichten

Falls Ihr das Inis-B-Theme individuell anpassen möchtet, könnt Ihr ein eigenes Child-Theme installieren.

Das Child-Theme wird im Theme-Ordner abgelegt (also unter /wp-content/themes). Bevor Ihr das tut, müsstet Ihr allerdings an drei Stellen Umbenennungen vornehmen. Für alle Umbenennungen gilt: Keine Großbuchstaben, Umlaute, Sonderzeichen oder Leerzeichen

1. Benennt den Ordner „inis-b-child-master“ in den Namen Eures Projektes um.
2. Paßt den Header in der Datei styles.css entsprechend Eures Projektes an.
3. Ersetzt in der Datei functions.php die Zeichenketten „inis-b-child“ und „inis_b_child“ mit eurem Projektnamen.

Nach dem Hochladen könnt Ihr das Child-Theme über den Theme-Reiter aktivieren.

Filter

Über Filter läßt sich die Ausgabe einiger Funktionen im Theme anpassen. Um die Filter zu nutzen, müsst Ihr ein Child-Theme installiert haben. Die Filter werden mit den Hook add_filter überschrieben. Der Code wird in der functions.php des Child-Themes abgelegt.

---

inis_b_archive_meta (category.php)
Gibt die Kategorie-Beschreibung auf der Archiv-Seite aus

apply_filters( 'inis_b_archive_meta', '<div class="archive-meta">' . $categorydesc . '</div>' );

---

inis_b_read_more_button (content.php)
Gibt den Weiterlesen-Button auf Archiv-Seiten aus

apply_filters( 'inis_b_read_more_button', '<a href="' . get_permalink(get_the_ID()) . '#more-' . get_the_ID() . '" class="more-link">' . __('Read more >', 'inis-b') . '</a>' );

---

inis_b_post_footer_output (functions.php)
Gibt den Artikel-Footer mit Kategorien, Tags etc. aus

apply_filters( 'inis_b_post_footer_output', $output );

Custom Styles

inis_b_custom_color_css_output (inc/custom_styles.php)
Gibt das CSS mit den Farben aus dem Customizer für das Frontend aus

apply_filters( 'inis_b_custom_color_css_output', $output );

---

inis_b_custom_backend_color_css_output (inc/custom_styles.php)
Gibt das CSS mit den Farben aus dem Customizer für den Block Editor aus

apply_filters( 'inis_b_custom_backend_color_css_output', $output );

Block Editor

inis_b_custom_editor_colors (inc/custom_gutenberg.php)
Gibt die auswählbaren Farben für den Block Editor aus

apply_filters( 'inis_b_custom_editor_colors', array(
  array(
    'name'  => esc_html__( 'Black', 'inis-b' ),
    'slug' => 'black',
    'color' => '#000000',
  ),
  array(
    'name'  => esc_html__( 'White', 'inis-b' ),
    'slug' => 'white',
    'color' => '#ffffff',
  ),
  array(
    'name'  => esc_html__( 'Gray', 'inis-b' ),
    'slug' => 'gray',
    'color' => '#727477',
  ),
  array(
    'name'  => esc_html__( 'Theme Color', 'inis-b' ),
    'slug' => 'inis-b-theme-color',
    'color' => esc_html( get_theme_mod( 'inis_b_theme_color', '#e6ff00' ) ),
  ),
));

---

inis_b_blockeditor_restricted_cpt (inc/custom_gutenberg.php)
Gibt die Custom Post Types aus, bei denen der Block Editor nur eingeschränkte Blocks beinhalten soll

apply_filters( 'inis_b_blockeditor_restricted_cpt', array('member','project') );

---

inis_b_block_types_restricted_cpt (inc/custom_gutenberg.php)
Gibt die Liste der eingeschränkten Blocks für die Custom Post Types aus

apply_filters( 'inis_b_block_types_restricted_cpt', array(
  'core/paragraph',
  'core/image',
  'core/heading',
  'core/quote',
  'core/list',
  'core/button',
  'core/spacer'
));

Customizer

inis_b_theme_font_choices (inc/custom-customizer.php)
Gibt die Liste der auswählbaren Webfonts aus

apply_filters( 'inis_b_theme_font_choices', array(
  'work-sans' => 'Work Sans',
  'plex-serif' => 'Plex Serif',
  'plex-mono' => 'Plex Mono',
)),

---

inis_b_theme_color_label (inc/custom-customizer.php)
Gibt das Label für das „Theme Farbe“-Feld aus

apply_filters( 'inis_b_theme_color_label', __('Theme Color', 'inis-b') ),

---

inis_b_theme_button_color_label (inc/custom-customizer.php)
Gibt das Label für das „Hintergrundfarbe für die Buttons“-Feld aus

apply_filters( 'inis_b_theme_button_color_label', __('Button Color', 'inis-b') ),

---

inis_b_theme_navi_color_label (inc/custom-customizer.php)
Gibt das Label für das „Hintergrundfarbe für die Navigation“-Feld aus

apply_filters( 'inis_b_theme_navi_color_label', __('Theme Navi Color', 'inis-b') ),

---

inis_b_theme_navi_button_color_label (inc/custom-customizer.php)
Gibt das Label für das „Hintergrundfarbe für die Navigations-Buttons“-Feld aus

apply_filters( 'inis_b_theme_navi_button_color_label', __('Theme Navi Button Color', 'inis-b') ),

---

iinis_b_theme_navi_button_text_color_light_label (inc/custom-customizer.php)
Gibt das Label für die „Helle Farbe für die Navigations-Button-Texte“-Checkbox aus

apply_filters('inis_b_theme_navi_button_text_color_light_label', __('Lighter Color for Navi Button Text', 'inis-b')),

---

inis_b_theme_banner_color_label (inc/custom-customizer.php)
Gibt das Label für das „Hintergrundfarbe für das Banner“-Feld aus

apply_filters( 'inis_b_theme_banner_color_label', __('Theme Banner Color', 'inis-b') ),

---

inis_b_theme_banner_color_for_navi_button_hover_label (inc/custom-customizer.php)
Gibt das Label für die „Banner-Farbe für den Hover-Status der Navigations-Buttons“-Checkbox aus

apply_filters('inis_b_theme_banner_color_for_navi_button_hover_label', __('Banner Color for Navi Button Hover', 'inis-b')),

---

inis_b_theme_header_text_color_choices (inc/custom-customizer.php)
Gibt die Farben für das Header-Textfarben-Dropdown aus

apply_filters('inis_b_theme_header_text_color_choices', array(
  '#000' => __('Black','inis-b'),
  '#FFF' => __('White','inis-b'),
  'theme-color' => __('Theme Color','inis-b'),
)),

---

inis_b_theme_header_background_color_choices (inc/custom-customizer.php)
Gibt die Farben für das Header-Hintergrundfarben-Dropdown aus

apply_filters('inis_b_theme_header_background_color_choices', array(
  '#000' => __('Black','inis-b'),
  '#FFF' => __('White','inis-b'),
  'theme-color' => __('Theme Color','inis-b'),
)),

Plugable Functions

Außerdem gibt es noch Funktionen, die aus dem Child-Theme herausüberschrieben werden können, indem einfach im Child-Theme eine Funktion mit gleichen Namen angelegt wird.

---

inis_b_header (inc/custom-header.php)
Gibt den Code für den Header der Webseite aus.

---

inis_b_navi (inc/custom-header.php)
Gibt den Code für die Navigation der Webseite aus.

---

inis_b_footer (inc/custom-header.php)
Gibt den Code für den Footer der Webseite aus.