Support » Allgemeine Fragen » DIV Element in WordPress Seite integrieren

  • Hallo,

    es gibt Code Snippet Tools, ich glaube mit diesen ist es nur möglich Javascript oder ähnlich Code zu intigrieren.

    Ich habe folgendes Problem: Ich möchte eine DIV Element bzw einen Button Fix am rechten rechten Rand hinzufügen. Vielleicht kennt jemand auch ein Plugin. Ich habe dazu nichts gefunden.

    Eigentlich geht es um einen simplen Button – > Rückruf anfordern oder einen LINK zum Kontaktformular.

    Danke und Gruß
    Andreas

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Du kannst als „schnelle Lösung“ Codesnippet eine Funktion einfügen, die zum Footer HTML-Code hinzufügt:

    add_action( 'wp_footer', 'pix_rueckruf_button' );
    function pix_rueckruf_button() {
    	echo '<button id="rueckrufbutton" class="rueckruf button">Ruf mich an: 0800/987654</a>';
    }

    Wenn die absolute Positionierung mit Layern zu aufwändig ist, könntest du auch einen eigenen Shortcode erstellen, den du dann nach Belieben in Beiträgen, Seiten oder Widgets verwenden kannst:

    add_shortcode( 'rueckruf', 'rueckruf_shortcode' );
    function rueckruf_shortcode( $atts , $content = null ) {
    	return '<button class="rueckruf button">' . $content . '</button>';
    }

    Mit [rueckruf]Ruf mich an: 0800/987654[/rueckruf] Kannst du den Button an beliebiger Stelle, auch mehrfach, einfügen und den Inhalt nach Bedarf austauschen.

    Das Styling kann jeweils unter Design > Customizer > Zusätzliches CSS eingefügt werden.

    Die bessere Lösung wäre, ein eigenes Plugin zu schreiben, das auch gleich das CSS richtig einbindet. Das klingt komplizierter als es ist. Im Grunde benötigst du dazu zwei Dateien: Ein Stylesheet style.css und eine PHP-Datei rueckrufbutton.php mit folgendem Inhalt:

    <?php
    /**
     * Plugin Name: Rueckruf
     * Description: Fügt Shortcode für Rückruf-Button hinzu
     * Author: Bego Mario Garde
     * Author URI: https://pixolin.de
     * Version: 1.0.0
     * License: GPL2
     */
    
    /*
        Copyright (C) 2018  Bego Mario Garde  <pixolin @ pixolin.de>
    
        This program is free software; you can redistribute it and/or modify
        it under the terms of the GNU General Public License, version 2, as
        published by the Free Software Foundation.
    
        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.
    
        You should have received a copy of the GNU General Public License
        along with this program; if not, write to the Free Software
        Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
    */
    
    // Make sure this file is only run from within WordPress.
    defined( 'ABSPATH' ) or die();
    
    add_action( 'wp_enqueue_scripts', 'pix_rueckrufbutton_style' );
    function pix_rueckrufbutton_style() {
    	wp_enqueue_style( 'rueckruf', plugins_url( 'style.css', __FIL), array(), '1.0', true );
    }
    
    add_shortcode( 'rueckruf', 'pix_rueckruf_shortcode' );
    function pix_rueckruf_shortcode( $atts , $content = null ) {
    	return '<button class="rueckruf button">' . $content . '</button>';
    }

    Beide Dateien packst du in ein Verzeichnis rueckrufbutton, komrimierst das Verzeichnis und installierst die Datei als neues Plugin. (Vorsichtshalber solltest du prüfen, ob du das Verzeichnis wp-content/plugins/rueckruf wieder per FTP löschen kannst, um dich bei Programmierfehlern nicht auszusperren.)

    Thread-Ersteller isarcolor

    (@isarcolor)

    Hallo Mario,

    danke für die nützlichen Tipps. Den Shortecode muss ich in der function definieren, richtig? Bin mir jetzt nicht ganz sicher.: )

    • Diese Antwort wurde geändert vor 3 Jahre, 6 Monaten von isarcolor.

    So wie ich es bereits beschrieben habe: entweder als Code Snippet oder als eigenes Plugin.

    Funktionen kannst du in der functions.php deines Themes anhängen – dann werden sie nur beim nächsten Theme-Update überschrieben. Du kannst auch extra ein Child Theme anlegen und die Funktion dort in der functions.php anhängen – das ist nur etwas zu viel Aufwand. Oder du installierst das Plugin Code Snippets und fügst damit neue Code Snippets hinzu.

    Thread-Ersteller isarcolor

    (@isarcolor)

    Hy Mario,

    also ich habe ein ChildTheme extra dazu angelegt und es funktioniert bereits super. Aber ich denke werde doch dann dein Plugin Code nutzen.

    PS: Vielleicht kannst du mir einen Tipp geben. Auf der Seite http://www.streitcargo.de (Seite ist nicht von mir) wird auch rechts und links Buttons genutzt. Aber wie es ausschaut, wurde das mit einem Plugin realisiert, richtig? Ich denke https://de.wordpress.org/plugins/so-widgets-bundle/

    Ach ja, eine Frage brennt mir noch unter den Nägeln. Vermutlich kommt hier das „base“ Theme zum Einsatz? (www.streitcargo.de)
    https://wp-themes.com/?page_id=46#mathead

    Im Quelltext sieht man, dass das theme zu cx-base umbenannt wurde?

    Aber ist das nicht schädlich, für zukünftige Updates des Themes?

    Danke und Gruß
    Andreas

    Auf der Website ist links ein benutzerdefiniertes Menü und rechts ein weiterer Abschnitt, der Bestandteil des Themes „cx“ sein sollte, dass speziell für diesen Kunden entwickelt wurde. Ob da ein anderes Theme als Grundlage verwendet wurde, kann ich nicht beurteilen.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „DIV Element in WordPress Seite integrieren“ ist für neue Antworten geschlossen.