Gør-det-selv WordPress

Kender du det med, at ville ændre en lille ting på sin eksisterende wordpress hjemmeside eller woocommerce webshop, og så kan man ikke huske, hvor man skal tage fat og hvordan?

I vores gør-det-selv WordPress guide viser vi dig, hvordan du selv udfører nogle af de små tilpasninger til WordPress, som du ofte har behov for.

Og nogle henviser til testede plugins, som løser opgaven.

Vores tips er fra begynder niveau til lidt mere avanceret niveau.

Sådan ændrer du i checkout-felterne i woocommerce

Checkout-siden i woocommerce efterlader ofte ønsker om tilpasning, fx sammenrykning af felter, skjule felter eller tilføje nye felter.

Plugin’et Flexible Checkout Fields Woocommerce gør det muligt at ændre i checkoutfelterne på en nem måde.

I følgende blogindlæg kan du se hvordan det gøres step-by-step: https://www.wpdesk.net/blog/woocommerce-shipping-and-billing-address/

En grundig gennemgang af, hvordan du re-organiserer alle checkout-felter, kan du læse her: https://rudrastyh.com/woocommerce/reorder-checkout-fields.html

Sådan sidestiller du postnr. og by i checkout-formularen: https://jeroensormani.com/ultimate-guide-to-woocommerce-checkout-fields/

Sådan laver du et child theme

Når du vil lave tilpasninger i dit WordPress Tema (theme), som går ud over, hvad du kan ændre i indstillingerne i temaet, så bør du lave et såkaldt child theme.

Et child theme giver du mulighed for at lave kodeændringer og tilpasninger i dit tema, som ikke vil blive overskrevet ved opdatering af temaet, hvilket ellers typisk vil være tilfældet.

Rent praktisk laver du en ny tema-mappe, og kopi filerne functions.php og style.css, hvilket er de 2 filer du typisk kan lave en masse ændringer i.

Du kan bruge et plugin, som du kan installere med et par få klik, eller du kan lave child-temaet manuelt.

Opsæt et child-theme med plugin

Hent følgende plugin og følg anvisningen: https://da.wordpress.org/plugins/child-theme-configurator/

Opsæt et child-theme uden plugin

  1. Log ind via ftp-server eller webhotellets filbrowser, og opret en ny mappe i mappen “/wp-content/themes/ som du kalder temaets navn efter af -child, fx: “storefront-child”.
  2. Opret et nyt .css dokument i den nye mappe, som du kalder “style.css”
  3. I “style.css” indsætter du følgende tekst øverst i dokumentet:
/*
 Theme Name:   Storefront Child
 Theme URI:    http://example.com/storefront-child/
 Description:  Storefront Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     storefront
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  storefrontchild
*/
  1. Erstat Theme Name og Template, så det matcher child-teamets navn (uden bindestreg) og det oprindelige temas navn.
  2. Opret et nyt .php dokument kaldet “functions.php” og indsæt følgende kode i dokumentet og gem:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(),  // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}
?>

Dit child-theme er nu klar, og du kan lave stylesheet ændringer i den nye child-theme “style.css” og kodeændringer i “functions.php”, som ikke bliver overskrevet ved fremtidige opdateringer til dit hoved-tema.

Nyttige SEO plugins

Til intern SEO on page optimering:

  • Rank math – giver dig en masse nyttige værktøjer som sitemaps, rich snippets, nemme meta ændringer, 404 overvågning og redirect tool
  • A3 lazy load – loader videoer og billeder, først når de vises, hvorved hastigheden på sitet øges
  • Short pixel – billedoptimering, så filstørrelsen reduceret med mindst muligt negativ impact på kvalitet. Mindre filstørrelse lig med hurtigere loadtider
  • W3 total cache – plugin som optimerer hastigheden på dit site med et væld af tilpasningsmuligheder. Gratis versionen fungerer a-okay.
  • Easy table of contents – opstil automatisk en indholdsfortegnelse baseret på dine overskrifter. En nyttigt når du skriver længere artikler/blogindlæg, og gerne vil give læseren et godt overblik over indholdet

De bedste WordPress GDPR plugins

ePrivacy, GDPR, privatlivspolitik – kært barn har mange navne. Når du har en hjemmeside i dag, er du nødt til at efterleve lovgivningen inden for Persondataloven. Reglerne for, hvordan du skal implementere indhentning af samtykke og registrering af cookies er ikke ukomplicerede. Dog findes der 3 gode privacy plugins til WordPress, som kan hjælpe dig godt på vej:

  • Cookieinformation.com
    Er nemt at konfigurere og opsætte på dit website. Prisen går fra 8 – 24 EUR per. måned. “Compliance dashboard” giver dig et overblik over alle dine cookies, deres klassificering og om der gemmes data i 3. parts lande. Her får du en detaljeret indsigt i alle de cookies, som din hjemmeside sætter. Denne løsning koster 24 EUR per måned. Mens løsningen er nem at sætte op, så er admin-delen hos Cookieinformation ikke super overskuelig. Du præsenteres for mange data, og en detaljegrad, som kræver tid at sætte sig ind i og forstå. Hent Cookieinformation her.
  • Cookiebot.com
    Er nemt at sætte op, og har en god gratis version, hvis du har under 100 undersider, samt kan leve med, at du ikke personalisere banner og cookiedeklarationen. Ellers kan du fra 67 kr./md få op til 500 undersider, samt mulighed for at style med eget logo og tekst. Hent Cookiebot her.
  • Complianz.io
    Complianz.io er baseret på et WordPress plugin, som guider dig igennem en opsætningsproces. Complianz fås i en gratis version, som giver dig langt hen ad vejen, det du har behov for. Dog kan du ikke klassificere alle cookies.

    I premium versionen får du adgang til alle de nødvendige juridiske dokumenter til din hjemmeside, samt en detaljeret cookiebeskrivelse. Da premium plugin’et kun koster $45 om året, og er derfor en del billigere en Cookiebot og Cookieinformation.

    Når du har downloaded Complianz og aktiveret plugin, får du vist en trinvis guide, som hjælper dig med at sætte løsningen op. Den er opbygget på en brugervenlig måde med spørgsmål, du skal svare på, for at fylde hullerne ud. Du kan hente Complianz her.

Fjern breadcrumbs fra specifikke sider

Denne artikel på woocommerce.com forklarer glimrende, hvordan du kan ændre i breadcrumbs i Woocommerce plugin og Storefront temaet: https://docs.woocommerce.com/document/customise-the-woocommerce-breadcrumb/

Hvis du vil fjerne brødkrummer fra forsiden, kan du Fjern brødkrummer fra forsiden, hvis du fx har hardcoded en forside: https://wordpress.org/support/topic/how-to-remove-breadcrumbs-from-shop-page/

Tillad kun 1 vare i kurven

Muligvis et sjældent behov, men ikke desto mindre, har man i nogle webshops behov for, at kunden kun kan købe 1 produkt ad gangen.

Følgende tilpasning i child-temaets functions.php sørger for at tømme indkøbskurven og lægge det nye produkt i, ved klik på Læg i Kurv knappen.

/* Clear cart data before adding new */
// before add to cart, only allow 1 item in a cart
add_filter( 'woocommerce_add_to_cart_validation', 'woo_custom_add_to_cart_before' );
 
function woo_custom_add_to_cart_before( $cart_item_data ) {
 
    global $woocommerce;
    $woocommerce->cart->empty_cart();
 
    // Do nothing with the data and return
    return true;
}

Fjern antal på produktsiden

Har du behov for, at kunden kun kan købe 1 slags af et produkt? Så kan du lige så godt skjule muligheden for at vælge antal, og derved fjerne unødig støj fra produktsiden.

Med følgende filter i child-temaets functions.php kan du helt fjerne antal-feltet (quantity field) på produktsiden:

function custom_remove_all_quantity_fields( $return, $product ) {return true;}
add_filter( 'woocommerce_is_sold_individually','custom_remove_all_quantity_fields', 10, 2 );

Fjern kreditering i footeren

Ikke alle temaer – særligt ikke de gratis af slagsen – tillader, at du fjerne kredittering i footeren. Heller ikke wordpress standardtemaer.

Denne artikel forklarer, hvordan du nemt tweaker wordpress og kan tilføje din egen info: https://www.wpbeginner.com/wp-themes/how-to-remove-the-powered-by-wordpress-footer-links/

Fjern søgefelt i Storefront tema

Det er ikke altid, at det er nødvendigt at tilbyde dine kunder en søgemulighed på hjemmesiden/webshoppen.

Du har måske meget få produkter på siden, og derved giver det ikke så meget mening, at bruger dyrbare pixelpladser på et søgefelt.

Hvis du bruger Woocommerce Storefront tema, så er det faktisk meget enkelt. Indsæt blot følgende kode i dit child-tema’s functions.php fil:

<?php
function fjern_search() {
    remove_action( 'storefront_header', 'storefront_product_search', 40 );
}
add_action( 'init', 'fjern_search' );

Fjern beskrivelse, reviews og yderligere info fra produktsiden

I Woocommerce vises “Yderligere info” tab i bunden af produktsiden, sammen med “Vareanmeldelser” tab. Sidsnævnte kan deaktiveres via menuen: Woocommerce / Indstillinger / Varer.

Følgende kodetilføjelse til functions.php viser dig hvordan du fjerner elementerne “Beskrivelse”, “Vareanmeldelser” og/eller “Yderligere info” fra produktsiden:

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );          // Remove the description tab
    unset( $tabs['reviews'] );          // Remove the reviews tab
    unset( $tabs['additional_information'] );   // Remove the additional information tab
    return $tabs;
}

Bestem hvor mange produkter, der skal vises på shoppens forside

I de fleste tilfælde kan du lave følgende ændringer i childtemaets functions.php og derved ændre i antallet af produkter, som skal vises på en række.

Hvis du fx ønsker at der skal vises 5 produkter på en række på shoppens forsiden, tilføjer du følgende kodebid:

/**
 * Change number or products per row to 5
 */
add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
	function loop_columns() {
		return 5; // 5 products per row
	}
}

Hvis du gerne vil præsentere nogle produkter fra shoppen, fx i en sektion på forsiden, så kan du altid indsætte produkter via WooCommerce shortcodes:

[recent_products per_page="12" columns="6"]

Som viser de 12 nyeste produkter i 2 rækker af 6.

Sådan fjerner du dropdown med sortering på shoppens forside

Ønsker du at fjerne dropdown boksen på shoppens forside, som gør det muligt at sortere shoppens varer, så kan

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
//This snippet will remove the notice that shows the number of results.
 
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering',30 );

Kilde: https://www.wpblog.com/woocommerce-remove-default-sort-option/

Sådan fjerner du overskrift fra forsiden

function remove_header() {
   if (is_front_page()) {
   $css_to_hide_header = '
   <style>
    .page.entry-header {
        display:none;
    }
        </style>';
   echo $css_to_hide_header;
}
}
add_action('wp_head', 'remove_header');

Sådan giver du Webhelpers adgang til Google Tag Manager

https://support.google.com/tagmanager/answer/6107011?hl=da