Jak dodać tryb ciemny do witryny WordPress?

Przez brak czasu zwlekałem z implementacją trybu ciemnego (Dark Mode) do CodeGeek. Ale w końcu zebrałem się za siebie i go wdrożyłem . Wyszło myślę bardzo dobrze, co sami możecie ocenić przełączając trigger na górze strony.

WSTĘP (HTML/DIV/INPUT):

Całość działa bez żadnej wtyczki do implementacji wykorzystałem HTML,CSS,JS,PHP. Jeśli jest możliwość to takie rzeczy zawsze lepiej wdrażać samemu. Raz możecie się wiele nauczyć, dwa wasza strona nie traci na wydajności i po trzecie macie pełną kontrolę nad tym co jest w kodzie. Rozwiązanie może działać z każdym motywem, nie ważne czy jest wasz, darmowy czy płatny.

PRZYCISK:

Zaczynamy o dodania przycisku na stronie dzięki któremu użytkownik będzie mógł przełączać motyw.

<div class="przelacznik">
<input class="switch_trigger" type="checkbox" id="darkcodegeek">
</div>

Najważniejsze tutaj to:

  • Utworzenie odpowiednie classy div
  • do <input> dodanie id które posłuży nam w kodzie JS

Jak już mamy dodany przycisk do header dobrze będzie go trochę zmodyfikować w css aby przypominał przełącznik.

ROZWINIĘCIE (PHP/JS/CSS)

Przycisk już mamy kolejnym krokiem będzie dodanie wyzwalacza aby przełączać nasz motyw na ciemny. Do tego potrzebujemy dodać skrypt js do naszej strony. Jeśli korzystamy z WordPressa to najlepiej wykorzystać funkcje:

<?php
function darkmode(){
    ?>
    <script>
    
    </script>
    <?php
}
add_action('wp_footer', 'darkmode');

Do środka ładujemy nasz skrypt JS który będzie zmieniać css:

document.getElementById('darkcodegeek').addEventListener('change', function(event){
  (event.target.checked) ? document.body.setAttribute('codegeek-theme', 'dark') : document.body.removeAttribute('codegeek-theme');
});

Łatwa cześć za nami, teraz najżmudniejsza czyli przepisanie naszego motywu na ciemne odcienie. Do tego zabiegu wykorzystamy CSS Variables.

A powinno to wyglądać mniej więcej tak, tworzymy dwa atrybuty light and dark i w innych umieszczamy odpowiednie zachowanie, przykład poniżej:

:root, [codegeek-theme="default"] {
		--border: none;
		--image-h: 60%;
		--color-blog-read: #000;
		--color-text-blog: #000;
}
@supports (--css: variables) {
  [codegeek-theme="dark"] {
		--border: none;
		--image-h: 60%;
		--color-blog-read: #222222;
		--color-text-blog: #FFF;
}
#top .font_icon a {
	border-color: #222;
	border-color: var(--colorsocial-icon-b);
	display: block;
	color: #222;
	color: var(--colorsocial-i);
}

ZAKOŃCZENIE:

Jeśli zrobimy wszystko jak należy to powinniśmy otrzymać następujący efekt:

KALKULATOR PŁYTEK

Mam okazję tworzyć duży sklep internetowy dla Firmy Luxkon która specjalizuje się w najlepszej jakościach płytkach ceramicznych (podłogowe, łazienkowe) a także armaturę sanitarną. Jedno z zadań które stało przede mną to stworzenie kalkulatora owych płytek (Kalkulator m2). Niestety nie mogłem wykorzystać Measurement Price Calculator który oferuje Woocommerce gdyż nie spełniał on wszystkich oczekiwań polskiego rynku.

Kalkulator musiał przeliczać m2 na paczki i odwrotnie z opcją dodania 10% na tak zwane ścinki, a przy tym pokazywać klientowi cały czas faktyczną zamawianą ilość.

Poniżej efekt (Frontend)

Admin:

Działanie jest bardzo proste wybieramy produkt m2 (prosty) lub (wariant) przechodzimy do magazyn i wpisujemy naszą powierzchnie, reszta już dzieje się automatycznie.

Przetestowałem szybkość popularnych widżetów czatu

Widżety czatu mogą wyglądać na małe, ale pod maską jest zbyt wiele elementów. Jeśli nie zostaną poprawnie zbudowane, widżety czatu mogą mieć duży wpływ na wydajność witryny.

Zrobiłem więc kilka testów, aby dowiedzieć się, który z nich jest dobrze zakodowany i poważnie potraktowałem optymalizację ^^

Testy przeprowadziłem na:

Tidio:

Facebook Chat:

Crisp:

Jak widzimy Crisp jest bardzo dobrze zoptymalizowany. Crisp ma również prawie zerowy wpływ na PageSpeed / Lighthouse. Owację na stojąco dla programistów stojących za tym chatem. Najgorzej w tym zastawieniu wypada Facebook Chat, który w znaczący sposób spowalnia nam stronę to jeszcze ładuje masę dodatkowych skryptów slędzących JS.

Każdy chat został zintegrowany z stroną za pomocą:

function chat_script(){
?>
TWÓJ KOD
<?php
}
add_action('wp_footer', 'chat_script');
?>

Stripe a nowoczesne formy płatności

Na obecnym rynku cieżko o dobrą bramkę płatności która ma wszystkie najnowocześniejsze formy płatności. Obecnie liderzy rynku przyzwyczaili nas do Blik’u, Płatność kartą, Bramek płatności (automatycznie wypełnianie pól w banku) a gdzie Android Pay lub Apple Pay ? I tutaj świetnym rozwiązaniem okazuje się Stripe, gdyż posiada wszystko to co w/w plus wspiera płatności mobilne które są coraz popularniejsze ze względu na wygodę użytkowania. . . .

A co z integracją ? Jest banalnie prosta wystarczy znajomość PHP i JS i bezproblemowo możemy to sami wdrożyć w nie całe 1 h z testami (Posiadają świetną dokumentację) co obecnie zrobiliśmy dla naszego nowego Klienta Rebago (Firma która prowadzi sprzedaż na całą Europę). . . .

Gorąco Polecam tą bramkę płatności wszystkim Developerom jak i właścicielom sklepów internetowych. . . . .

Dodanie zależności miedzy wybieraniem typy dostawy a płatnością

Jeśli korzystacie z Woocommarce to na pewno natrafiliście na problem zależności wybieranego typu dostawy a typu płatności a raczej jej brak. To znaczy że jeśli klient np wybrał dostawę na pobraniem to i tak nadal mógł zrobić przelew lub wykorzystać bramkę płatności aby usunąć w/w problem wystarczy w folderze motywu dodać następujący kod:

 

session->get( 'chosen_shipping_methods' );
// When 'local delivery' has been chosen as shipping rate
if ( ! in_array( 'flexible_shipping_1_1', $chosen_shipping_rates ) ) :
// id dostawy

unset( $gateways['bacs'] );
unset( $gateways['transferuj'] );

elseif ( ! in_array( 'flexible_shipping_1_2', $chosen_shipping_rates ) ) :
// id dostawy nr 2

unset( $gateways['cod'] );

endif;
return $gateways;
}
add_filter( 'woocommerce_available_payment_gateways', 'my_custom_available_payment_gateways' );
?>

Dodanie do Woocommarce pola NIP

Jeśli korzystacie w sklepu internetowego Woocommerce to pewnie zauważyliście że w polach w których klient wpisuje swoje dane lub dane firmy nie ma pola NIP. Aby takowe pole się pojawiło wystarczy w folderze motywu w pliku functions.php dodać następujący kod: fausse rolex http://www.buywatcheswiss.com/ https://www.topomegawatches.com/ fausse rolex replique montre



/**
* NIP
*/
add_action( 'woocommerce_after_order_notes', 'wpdesk_vat_field' );
/**
* Pole NIP w zamówieniu
*/
function wpdesk_vat_field( $checkout ) {
echo '

' . __('Dane do Faktury') . '
';

woocommerce_form_field( 'vat_number', array(
'type' => 'text',
'class' => array( 'vat-number-field form-row-wide') ,
'label' => __( 'NIP' ),
'placeholder' => __( 'Wpisz NIP, aby otrzymać fakturę' ),
), $checkout->get_value( 'vat_number' ));

echo '

';
}
?>

add_action( 'woocommerce_admin_order_data_after_billing_address', 'wpdesk_vat_number_display_admin_order_meta', 10, 1 );
/**
* Wyświetlenie pola NIP
*/
function wpdesk_vat_number_display_admin_order_meta( $order ) {
echo '

' . __( 'NIP', 'woocommerce' ) . ': ' . get_post_meta( $order->id, '_vat_number', true ) . '

';
}
?>