nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Hoe u vakantiekennisgevingen toevoegt aan uw WordPress-site

De festiviteiten zijn bij ons en wat is een betere manier om de juichstemming te verspreiden dan een bericht met een kerstthema op uw site te plaatsen ? Misschien ga je binnenkort op vakantie, misschien wil je je bezoekers begroeten met een speciale kaart, of wil je misschien gewoon een speciaal bericht weergeven.

Er zijn veel WordPress Christmas-plug-ins waar we al naar hebben gekeken, maar hoe zit het met het zelf doen? Heb je wat tijd voor een kort WordPress-project tijdens de feestdagen? Volg mee en leer hoe je een aantal kerstberichten aan je website kunt toevoegen via een tekstwidget, een plakbalk en een tellerverbinding.

Een tekstwidget maken

Er is hier geen rocket science, sorry! U kunt een snel bericht toevoegen en het in een widgetgebied weergeven door naar Uiterlijk> Widgets te gaan, een tekstwidget naar een zijbalk te slepen en uw bericht in het vak in te voeren. Je kunt er HTML in gebruiken, dus je kunt dingen spannender maken met een afbeelding als je wilt.

Ik ben het ermee eens, dit is een beetje saai, maar het zou precies de juiste hoeveelheid festiviteit kunnen zijn om toe te voegen. Veel meer serieuze sites zoals sites voor e-commerce of persoonlijke portefeuilles zouden negatief worden beïnvloed door dansende kerstmannen, maar mensen waarderen toch een beetje kerstpret.

Sticky Bar

Wat dacht je van een stickbar, vergelijkbaar met de Quick Notice-plug-in, maar een die we zelf codeerden? We kunnen het ook eenvoudig naar de bovenkant van de pagina laten bladeren.

De eerste stap is het maken van een plug-in, laat me u laten zien hoe:

Maak in de map met plug-ins een nieuwe map met de naam "my-sticky-bar". Maak in die map een bestand met de naam "my-sticky-bar.php" en plak de volgende inhoud erin:

Nadat u dit bestand hebt opgeslagen, kunt u de plug-in activeren via het gedeelte Plug-ins van de WordPress-beheerder. Het doet nog niets, maar we zullen dat snel oplossen!

We moeten twee dingen doen: gebruik PHP en HTML om ons bericht uit te voeren en CSS te gebruiken om het te stylen .

Gebruik in het bestand "mijn-sticky-bar.php" de volgende code om de benodigde HTML op de juiste plaats toe te voegen:

 add_action ('wp_footer', 'my_sticky_bar_display'); function my_sticky_bar_display () {echo " 
Vrolijk kerstfeest iedereen!
";}

De eerste regel is een WordPress-haak, het vertelt WordPress om de "my_sticky_bar_display" -functie net voor het einde van het lichaam uit te voeren. Het is prima om de HTML voor onze balk aan het einde van de pagina te laden. Het is niet zo belangrijk en kan via CSS worden verplaatst.

In dit stadium zou je je bericht onderaan je site kunnen zien, zonder opmaak. Om opmaak toe te voegen, moeten we een stylesheet toevoegen door deze in te checken.

In hetzelfde bestand:

 add_action ('wp_enqueue_scripts', 'my_sticky_bar_styles'); function my_sticky_bar_styles () {wp_enqueue_style ('my-sticky-bar', plugin_dir_url (__FILE__). '/my-sticky-bar.css'); } 

Enqueueing is een manier om scripts en stijlen modulair aan WordPress toe te voegen. U hoeft dit echter niet te begrijpen - als u dit in het plugin-bestand plakt en het bestand "my-sticky-bar.css" maakt, kunt u beginnen met het toevoegen van uw stijlen. Laten we dat nu doen.

 # my-sticky-bar {positie: absoluut; top: 0px; breedte: 100%; text-align: center; kleur: #fff; achtergrond: # 810400; opvulling: 11px 0; text-transform: hoofdletters; letter-spacing: 2px; } 

Het beste van alles is dat als u "absoluut" vervangt door "vast", het bericht bovenaan het venster blijft staan ​​en gebruikers rond zal volgen wanneer ze scrollen.

Deze methode is geweldig omdat je de volledige controle hebt over alles! Hoe zit het bijvoorbeeld met het constant houden van deze plug-in, maar alleen met het tonen van het bericht op 25 december? Geen probleem, wijzig de functie my_sticky_bar_display beetje.

 add_action ('wp_footer', 'my_sticky_bar_display'); function my_sticky_bar_display () {if (date ('d') == 25 && date ('m') == 12) {echo " 
Vrolijk kerstfeest iedereen!
";}}
Tegen Widget

We hebben al wat eenvoudige tekst in onze tekstwidget toegevoegd, maar hoe zit het met het maken van een aftelling voor onze gebruikers?

De eerste stap is om WordPress te laten weten dat we een aangepaste widget willen maken. We moeten een functie definiëren en deze widgets_init aan widgets_init . Maak een nieuwe plug-in, net als eerder, en plak in het hoofdbestand het volgende:

 add_action ('widgets_init', 'christmas_countdown_widget'); function christmas_countdown_widget () {register_widget ('Christmas_Countdown_Widget'); } 

We zullen een klasse met de naam Christmas_Countdown_Widget met een paar functies erin. Laten we beginnen met het maken van een constructorfunctie. Plak alles hieronder ook in het hoofdinvoegbestand.

 class Christmas_Countdown_Widget breidt WP_Widget uit {function __construct () {parent :: __ construct ('christmas_countdown_widget', 'Christmas Countdown Widget', array ('description' => 'Een eenvoudige Christmas countdown')); }} 

De constructorfunctie bevat enkele belangrijke informatie die wordt gebruikt om de widget te bouwen. Het bevat de id van de widget (christmas_countdown_widget), de naam die verschijnt in de back-end UI (Christmas Countdown Widget) en de beschrijving die ook wordt getoond.

We kunnen een functie met de naam form() die kan worden gebruikt om sommige instellingen voor de widget uit te voeren. We zullen het hier niet gebruiken, maar houden het in gedachten voor toekomstige projecten. Ik voeg voor nu gewoon een lege functie toe.

We zullen de widget() functie gebruiken om de widget naar de voorkant uit te voeren. Laten we nu een eenvoudige aftelling toevoegen. Plak de volgende code in de klasse, onder de __construct() -functie. Merk op dat ik nu ook de functie empty form() toevoeg.

 functievorm () {} functie widget () {echo "Time to Christmas:". human_time_diff (time (), mktime (0, 0, 0, 12, 25, date ('Y'))); } 

We gebruiken de functie human_time_diff() die door WordPress wordt aangeboden om de tijd tussen vandaag en de eerste kerstdag te berekenen. Dit toont iets als: "Tijd tot Kerstmis: 5 dagen".

Dit is vrij eenvoudig, maar je kunt elke vorm van afbeeldingen, tekst, stijlen en Javascript gebruiken om deze er geweldig uit te laten zien. De laatste en complete code voor onze widget is als volgt:

 add_action ('widgets_init', 'christmas_countdown_widget'); function christmas_countdown_widget () {register_widget ('Christmas_Countdown_Widget'); } class Christmas_Countdown_Widget breidt WP_Widget uit {function __construct () {parent :: __ construct ('christmas_countdown_widget', 'Christmas Countdown Widget', array ('description' => 'Een eenvoudige Christmas countdown')); } functievorm () {} functie widget () {echo "Time to Christmas:". human_time_diff (time (), mktime (0, 0, 0, 12, 25, date ('Y'))); }} 
Fijne vakantie!

Ik hoop dat ik je een paar ideeën heb gegeven om wat kerstpret toe te voegen aan je website! Als je geen kerst viert, kun je deze methoden altijd gebruiken en toepassen op je eigen cultuur.

Eten en vieren tijdens de feestdagen? Lees ons artikel over kerst WordPress-plug-ins voor tonnen geweldige ideeën en snelle toegang tot geweldige vakantie dingen!

Tien multifunctionele WordPress-thema's voor veelzijdige ontwerpers

Tien multifunctionele WordPress-thema's voor veelzijdige ontwerpers

Tenzij u zich richt op een specifiek type website-ontwerp, is het dus verstandig om te investeren in een multifunctioneel WordPress-thema . Multifunctionele thema's bieden u de flexibiliteit die u nodig zou hebben om voorbereid te zijn op elke opdracht die op uw pad komt.De multifunctionele WordPress-thema's die hier worden weergegeven, hebben alles wat nodig is om elk type website of onderwerp aan te pakken

(Technische en ontwerptips)

20 nuttige SVG-tools voor betere grafische weergave

20 nuttige SVG-tools voor betere grafische weergave

SVG wint tegenwoordig aan populariteit in webontwerp en u kunt tools zoals Illustrator of Inkscape gebruiken om SVG-afbeeldingen te maken. Maar als het gaat om webdesign, moeten we altijd optimaliseren voor lichtere resultaten.Hier de 20 tools die u kunt gebruiken om snel en efficiënt met SVG te werken .

(Technische en ontwerptips)