abgx360.net
  • Home
  • Уроци
  • Сигурност
  • Новини и общност
  • Отзиви
RSS

So fügen Sie einen coolen CSS3-Button-Shortcode in WordPress hinzu

07.06.2020 Jeffrey Wilson Tutorials

So fügen Sie einen coolen CSS3-Button-Shortcode in WordPress hinzu

Wenn Sie kein großer Fan der Arbeit mit dem HTML-Editor in WordPress sind oder einige coole Verbesserungen für Ihre Premium-Themen bereitstellen möchten, sind Shortcodes eine großartige Lösung, um die Funktionen Ihres Post-Editors zu erweitern und gleichzeitig die Dinge einfach zu halten.


Ich dachte, es wäre cool, meiner Site eine Art Schaltfläche hinzuzufügen, wenn Links zu kostenlosen Dateien oder anderen Sites bereitgestellt werden (natürlich mit Shortcodes). Nachdem ich den Shortcode zu meinem Thema hinzugefügt hatte, dachte ich, ich würde den Code hier auf der Website teilen Bloggen, damit andere Leute, die daran interessiert sind, Schaltflächen-Shortcodes zu ihrer Website hinzuzufügen, meinen Code einfach kopieren und in ihr Thema einfügen können und nicht zu viel Zeit damit verbringen müssen, den Shortcode zu erstellen und die Schaltfläche zu gestalten.

Contents

  • 1 Was sind Shortcodes??
  • 2 Hinzufügen eines benutzerdefinierten Shortcodes für Schaltflächen
  • 3 Verwenden des Shortcodes in Ihrem Post-Editor
  • 4 Styling der Taste
  • 5 Unterstützung für mehrere Farben

Was sind Shortcodes??

Shortcodes wurden bereits in WordPress 2.5 eingeführt und ermöglichen es Ihnen, Makrocodes zur Verwendung in Post-Inhalten zu erstellen. Ein einfacher Shortcode würde ungefähr so ​​aussehen:

[Shortcode]

Beim Hinzufügen zum Post-Editor wird der Wert des Shortcodes zurückgegeben, der in Ihren Themendateien definiert ist. Ich werde Ihnen zeigen, wie Sie einen Shortcode erstellen, mit dem Sie Ihrem Post-Editor ganz einfach Schaltflächen hinzufügen können, ohne Code zu berühren.

Hinzufügen eines benutzerdefinierten Shortcodes für Schaltflächen

Als erstes müssen Sie den PHP-Code für Ihren Shortcode zu Ihrem Thema hinzufügen. Mit dem folgenden Code können Sie Ihrer Site eine einfache Schaltfläche hinzufügen. Dieser Code kann in die Datei functions.php eingefügt werden. Wenn Sie ein Thema eines Drittanbieters verwenden, geschieht dies am besten über ein untergeordnetes WordPress-Thema.

Funktion myprefix_button_shortcode ($ atts, $ content = null) {

// Shortcode-Attribute extrahieren
extrahieren (shortcode_atts (Array (
'url' => '',
'title' => '',
'Ziel' => '',
'text' => '',
'Farbe' => 'Grün',
), $ atts));

// Textwert für Elemente ohne Inhalt verwenden
$ content = $ text? $ text: $ content;

// Return Button mit Link
if ($ url) {

$ link_attr = array (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_blank': '',
'class' => 'myprefix-button color-'. esc_attr ($ color),
);

$ link_attrs_str = '';

foreach ($ link_attr als $ key => $ val) {

if ($ val) {

$ link_attrs_str. = ''. $ key. '= "'. $ val. '"';

}}

}}


Rückkehr ''. do_shortcode ($ content). '';

}}

// Kein Link definiert, also Return Button als Span
sonst {

Rückkehr ''. do_shortcode ($ content). '';

}}

}}
add_shortcode ('button', 'myprefix_button_shortcode');

Verwenden des Shortcodes in Ihrem Post-Editor

Nachdem Sie einen Shortcode haben, können Sie Ihrem Post-Editor den neuen “Button” hinzufügen (der jetzt wie ein einfacher Link aussieht, da wir ihn nicht gestaltet haben).

// Anwendungsbeispiel 1
[button href = "IHR LINK" target = "self"] Schaltflächentext [/ button]

// Anwendungsbeispiel 2
[button href = "IHR LINK" target = "self" text = "Button Text"]

Styling der Taste

Was bringt es, einen Shortcode zu erstellen, wenn er nur wie ein einfacher Link aussieht? Nichts. Deshalb zeige ich Ihnen, wie Sie cooles CSS3 hinzufügen, um den Download-Button zu gestalten und ihn sexy aussehen zu lassen.

Wie Sie im Shortcode bemerkt haben, habe ich die Klasse “myprefix-button” hinzugefügt, damit Sie sie einfach über Ihre style.css-Datei formatieren können. Fügen Sie den folgenden Code in Ihr Stylesheet ein, um eine schöne blaue Schaltfläche wie die im Bild zu erstellen.

/ * Haupttastenstil * /
.myprefix-button {Hintergrund: # 65A343; Textschatten: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; Randradius: 5px; -Webkit-Box-Schatten: 1px 2px 1px rgba (0, 0, 0, 0,1); -Moz-Box-Schatten: 1 x 2 x 1 x rgba (0, 0, 0, 0,1); Kastenschatten: 1px 2px 1px rgba (0, 0, 0, 0,1); Cursor: Zeiger; Anzeige: Inline-Block; Überlauf versteckt; Polsterung: 1px; vertikal ausrichten: Mitte; }}

.myprefix-button span {border-top: 1px solid rgba (255, 255, 255, 0,25); -webkit-border-radius: 5px; -Moz-Rand-Radius: 5px; Rand-Radius: 5px; Farbe: #fff; Bildschirmsperre; Schriftdicke: fett; Schriftgröße: 1em; Polsterung: 6px 12px; Textschatten: 1px 1px 1px rgba (0, 0, 0, 0,25); }}

/* Schweben */
.myprefix-button: hover {Hintergrund: # 558938; Textdekoration: keine; }}

/ * Aktiv * /
.myprefix-button: active {Hintergrund: # 446F2D; }}

Grüne Shortcode-Taste

Unterstützung für mehrere Farben

Wenn Sie bemerkt haben, dass der Shortcode einen Farbparameter enthält, mit dem Sie CSS-Stile für verschiedene Schaltflächenfarben hinzufügen können. Wenn Sie beispielsweise eine blaue Farboption hinzufügen können, indem Sie dieses zusätzliche CSS hinzufügen:

/ * Blauer Knopf * /
.myprefix-button.color-blue {Hintergrund: # 2981e4}

/ * Blue Button Hover * /
.myprefix-button.color-blue: hover {Hintergrund: # 2575cf}

/ * Blaue Taste aktiv * /
.myprefix-button.color-blue: active {Hintergrund: # 0760AD}

Verwenden Sie nun einfach den Farbparameter im Shortcode:

[button href = "IHR LINK" target = "self" color = "blue"] Schaltflächentext [/ button]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    « 2014年40个必备WordPress插件 » 6 основни причини WordPress е най-добрата платформа за вашия сайт

    Random Posts

    • Εκμάθηση ματζέντο
    • Jak přidat živý chat na váš web WordPress
    • 10 complements de WordPress que tothom hauria de tenir
    • Tarvitsenko SiteGroundin SG-sivustoskanneria (arvostelu 2020): on se sen arvoista? Paljonko se maksaa?
    • 30 WordPress-Profis auf Twitter
    • 20多个最佳联系表7扩展和附加组件
    • Jak používat Patreon k crowdfundování vašeho obsahu WordPress
    • Com crear un negoci de Dropshipping amb WordPress
    • 10+ забавни WordPress приставки за джаз до вашия уебсайт
    • Как да публикувате публикации в блога на WordPress чрез имейл
    • WordPress Inspiration: Fantastische Websites im realen Leben mit dem gesamten WordPress-Theme
    • 10 hilfreiche Affiliate-Marketing-Tools
    • Průvodce, jak se stát uznávaným profesionálem WordPress
    • Die 10+ besten Affiliate-WordPress-Plugins
    • Преглед на приставките за електронна търговия на Selz WordPress
    • 15 parimat tasuta Faviconi generaatorit
    • Sådan fremskyndes WordPress
    • SiteGround PayPali makse (juhend) »Kas ma saan maksta PayPaliga?
    • 6 Tipps zur Sicherung Ihrer WooCommerce-Website
    • BlueHost MySQL-databasevejledning
    • Barrieren abbauen: Warum die Barrierefreiheit von WordPress-Websites der Schlüssel ist
    • Κριτική Kinsta
    • 为您的WordPress博客雇用自由作家时要寻找的内容
    • 重新设计您的WordPress网站以添加个人风格(续集)
    • 如何将Google AdSense添加到WordPress
    • Yksityiskohtainen kuvaus Vellum – reagoiva WordPress-teema
    • Com utilitzar Weglot per traduir el vostre lloc WordPress
    • Πώς να προσαρμόσετε το WordPress (101)
    • Урок за WordPress: Как да създадете WordPress тема от HTML (част 1)
    • Beste WooCommerce Versand-Plugins für Ihren Online-Shop
    • So erstellen und fügen Sie Ihre WordPress-Sitemap hinzu
    • 15 най-добри резервации за резервация на WordPress
    • Jak používat balíčky produktů jako marketingovou techniku ​​pro váš obchod WordPress
    • Εκμάθηση PrestaShop
    • Κριτική InMotion
    • 30+ WordPress-tilastot ja tosiasiat
    • So erstellen Sie eine Crowdfunding-Website mit WordPress
    • Heart Inetrnet UK veebimajutuse ülevaade
    • SiteGround-hyvityskäytäntö ja rahat takaisin -takuu (2020-opas): Kuinka peruuttaa SiteGround-hosting-tili?
    • 8 най-добри приставки за импортиране / експортиране на WordPress
    • Els millors complements de béns immobles de WordPress per crear un lloc web immobiliari
    • Кога и как да възлагате бизнес задачи за вашия WordPress блог
    • Как да ускорите блога си за WordPress
    • WordPress网站维护:您需要了解的指南
    • AI a WordPress: Jak umělá inteligence může pomoci vašemu webu
    • Guide d’hébergement Web pour les débutants
    • Webdesign-tendenser
    • So erhöhen Sie die Zeit, die Besucher auf Ihrer WordPress-Website verbringen
    • Com instal·lar WordPress a Microsoft Azure
    • PrestaShop-opetusohjelma
    • SiteGround Cloud Hosting Review & Plans Σύγκριση (2020)
    • WordPress网站维护入门指南
    • 总主题
    • Преглед на рекламата на WP Pro: Създаване, продажба и интеграция на реклами
    • Kas deebetkaardiga saab maksta InMotionis?
    • Αντιμετώπιση προβλημάτων WordPress (101)
    • Колекция от безплатни и премиум отзивчиви WordPress теми
    • So richten Sie den Google Tag Manager für WordPress ein
    • Тема персонализатор котел – Условни опции, Детски теми и приставки
    • Проверки за поддръжка на WordPress, за да се измъкнем днес
    • 只需6个简单的步骤即可增加您WordPress网站的访问量
    • Javascript richtig zu WordPress-Themes hinzufügen
    • 您必须拥有的10个高级WordPress插件
    • Kuidas portfooliot koostada
    • DigitalOcean Cloud Hosting -katsaus
    • Joomla hjemmeside tutorial
    • 5 tipů pro optimalizaci, aby byl váš web WordPress připraven pro mobilní zařízení
    • Com fer que els teus llocs de WordPress siguin més fàcils d’utilitzar
    • Com convertir-se en un empresari d’èxit i guanyar diners amb WordPress
    • Fanciest Author Box: Най-доброто авторско решение за WordPress?
    • Blog contre site Web – lequel choisir?
    • Online-äriideed
    • Как да добавите двуфакторна автентификация за WordPress
    • 50+ viisi veebisaidi liikluse suurendamiseks
    • Какво представлява ефектът на Паралакс? Защо и как да го използвате на сайта си WordPress
    • Comment sécuriser WordPress (2020)
    • 7 най-добри приставки за кеширане на WordPress през 2020 г.
    • So fügen Sie WordPress Instagram-Fotos hinzu
    • Můj krásný život WordPress: Seznamte se s Freddym
    • Trek – Responsive WordPress Tour / Travel Theme In-Depth Review
    • Nejlepší Job Board WordPress Témata
    • BAVOKO SEO Tools Преглед на приставките за WordPress
    • Προσφορά Bluehost – Αποκλειστική έκπτωση 2,95 $ / μήνα
    • Examen HostClear
    • Fügen Sie Ihrer WordPress-Site mit WP Job Manager eine Jobbörse hinzu
    • WebHostingHubi registreerumisjuhend
    • Създайте зашеметяващи отзивчиви таблици в WordPress с wpDataTables
    • Jak uspět jako vývojář WordPress – rozhovor s Davidem Rashtym z CreativeMinds
    • Tipps zur besseren Organisation Ihrer WordPress-Website
    • Опростете вашето онлайн присъствие с WordPress: теми, приставки, продукти и услуги
    • 如何在WordPress帖子中编写自定义代码
    • Как да управлявате съдържанието на WordPress с администраторски колони Pro
    • WPTouch: Eine schnelle und einfache Möglichkeit, Ihre WordPress-Website mobilfreundlich zu gestalten
    • 20 großartige Beispiele für WordPress-Sites
    • Com afegir xat en directe al vostre lloc de WordPress
    • WooCommerce产品表:改善您的商店并增加销售
    • Jak rozšířit svou online komunitu pomocí WordPress
    • Rychlé a snadné Google Analytics pro WordPress
    • BlueHost pengene tilbage garanti (detaljer)
    • Podrobný průvodce migrací webu WordPress na nového hostitele

    Follow us

    • facebook
    • twitter
    • dribbble

    ↑

    • Home
    • Уроци
    • Сигурност
    • Новини и общност
    • Отзиви