{"id":992,"date":"2019-08-16T11:25:06","date_gmt":"2019-08-16T09:25:06","guid":{"rendered":"https:\/\/www.welaunch.io\/de\/?p=992"},"modified":"2020-09-21T10:18:39","modified_gmt":"2020-09-21T08:18:39","slug":"sticky-call-now-button-wordpress","status":"publish","type":"post","link":"https:\/\/www.welaunch.io\/de\/2019\/08\/sticky-call-now-button-wordpress\/","title":{"rendered":"Wie man in WordPress eine Schaltfl\u00e4che &#8220;Sticky Call Now&#8221; erstellt"},"content":{"rendered":"<p>Wenn Sie jetzt einen Sticky Call erstellen m\u00f6chten Button in WordPress dann lesen Sie weiter.Ein &#8220;Jetzt anrufen&#8221;-Knopf kann Ihre Konvertierungen erh\u00f6hen oder Ihren Benutzern eine einfache und schnelle M\u00f6glichkeit zur Kontaktaufnahme mit Ihnen zeigen. Bei einem Bestattungsinstitut verwenden wir diese Schaltfl\u00e4che, um sofortige Hilfe zu erhalten, wenn ein Todesfall eingetreten ist.\u00d6ffnen Sie zun\u00e4chst Ihre Funktionen.php-Datei und f\u00fcgen Sie dort den folgenden Code ein:<\/p>\n<pre>Funktion custom_load_font_awesome() {    wp_enqueue_style( 'font-awesome-5', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.9.0\/css\/alle.min.css' );}add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );<\/pre>\n<p>Dadurch wird sichergestellt, dass das Telefonsymbol f\u00fcr den Anruf jetzt angezeigt wird. Wir verwenden daf\u00fcr gro\u00dfartige Schriftartsymbole.<\/p>\n<h2>Der HTML-Code des Call Now-Buttons<\/h2>\n<p>Als n\u00e4chstes f\u00fcgen Sie den html-Code hinzu, der in der Fu\u00dfzeile Ihrer WordPress-Installation angezeigt wird. Wir verwenden hierf\u00fcr den wp_footer-Hook, so dass das Skript ganz am Ende Ihrer Website gerendert wird. Dies vermeidet SEO-Probleme, da der Text jetzt vor dem Aufruf gerendert wird.Fahren Sie also fort und f\u00fcgen Sie die n\u00e4chsten Codezeilen hinzu, dh das Skelett ohne Styling des Flyout-Buttons:<\/p>\n<pre>Funktion we_sticky_call() {?><a href=\"tel:05911234\" class=\"we-sticky-call-container\"><div class=\"we-sticky-call-icon\"><i class=\"fas fa-phone-alt\"><\/i><\/div><div class=\"we-sticky-call-content\"><div class=\"we-sticky-call-title\">0591 1234<\/div><div class=\"we-sticky-call-description\">24\/7-Unfall-Telefon <\/div><\/div><\/a><?php}add_action( 'wp_footer', 'we_sticky_call' );<\/pre>\n<p>Make sure you replace the phone numbers with the one of yours.<\/p>\n<h2>Styling the Button<\/h2>\n<p>Of course the button needs some styling and should work on mobile devices right? So for the basic styling add the following lines of CSS to your styles.css file:<\/p>\n<pre>.we-sticky-call-container {    background: #f39200;    display: block;    width: 50px;    height: 50px;    border-radius: 50%;    position: fixed;    bottom: 20%;    left: 20px;    text-align: center;    line-height: 50px;    color: #fff;    z-index: 999;}.we-sticky-call-content {    position: absolute;    top: 0;    left: 25px;    width: 250px;    padding-left: 25px;    background: #f39200;    height: 50px;    z-index: -1;    border-radius: 0 25px 25px 0;    opacity: 0;    transition: all 0.5s ease;    font-size: 16px;    line-height: 20px;}.we-sticky-call-title {    margin-top: 5px;}.we-sticky-call-description {font-size: 12px;}.we-sticky-call-container:hover .we-sticky-call-content {opacity: 1;}<\/pre>\n<p>Now your button is styled and has some nice animations when hovering over the icon.So what about responsive? Additionally place the following CSS that will apply on mobile devices only:<\/p>\n<pre>@media (max-width: 768px) {.we-sticky-call-container {    bottom: 0;    width: 100%;    border-radius: 0;    left: 0;}.we-sticky-call-icon {display: none;}.we-sticky-call-content {opacity: 1;width: 100%;left: 0;padding-left: 0;}}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Wenn Sie jetzt einen Sticky Call erstellen m\u00f6chten Button in WordPress dann lesen Sie weiter.Ein &#8220;Jetzt anrufen&#8221;-Knopf kann Ihre Konvertierungen erh\u00f6hen oder Ihren Benutzern eine einfache und schnelle M\u00f6glichkeit zur Kontaktaufnahme mit Ihnen zeigen. Bei einem Bestattungsinstitut verwenden wir diese Schaltfl\u00e4che, um sofortige Hilfe zu erhalten, wenn ein Todesfall eingetreten ist.\u00d6ffnen Sie zun\u00e4chst Ihre Funktionen.php-Datei&#8230;<\/p>\n","protected":false},"author":1,"featured_media":993,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts\/992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/comments?post=992"}],"version-history":[{"count":10,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts\/992\/revisions"}],"predecessor-version":[{"id":5967,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/posts\/992\/revisions\/5967"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/media\/993"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/media?parent=992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/categories?post=992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.welaunch.io\/de\/wp-json\/wp\/v2\/tags?post=992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}