Wordpress Jenkler theme
-
Jenkler namnkonvention
Länk: wordpress-theme-jenkler
Språk: Vi använder 2 tecken som visar vilket språk det är (*en, sv, gb). Dock så skrivs standardspråket aldrig ut i namnet. Om sidan är engelsk så struntar vi i en och är den svensk så strunta vi i sv.
Globala
global-<namn>-<språk>
global-footer (html-fot) - uni, footer, inget språkstöd
global-functions (blandade små funktioner) - php, run everywhere, inget språkstöd
global-functions-navwalker (walker för menysystem) - php, run everywhere, inget språkstöd
global-header (html-head) - uni, head, inget språkstöd
global-map (mappning mellan template fil och template implementation) - php, run everywhere, inget språkstöd-- OLD WW --
global-bottom (sidfot primärspråk)
global-bottom-en (sidfot engelska)
global-breadcrumb (länkstig primärspråk)
global-breadcrumb-en (länkstig engelska)global-mail (hanterar formulär-POST-data)
global-top (sidhuvud primärspråk)
global-top-en (sidhuvud engelska)
-- OLD WW --Meny
menu-<språk>-<section>
menu (huvudmeny)
menu-<menu> (Där <menu> är menyns section)Sidor
page-<språk>-<permalänk>
Kod för att visa på alla sidor som skapas.
page (/)
page-en (/en/)
page-om-oss (/om-oss/)
page-en-about-us (/en/about-us/)Templates
template-home (arkivsida för blogginlägg) - uni, shortcode, inget språkstöd
template-index (standardmall för sidor) - uni, shortcode, inget språkstöd-- OLD WW --
I dessa widgets så skriver man php-kod direkt och de finns som standard i tema filerna. Inget språkstöd. Genom att använda custom-mallar så kan man aktivera Gutenberg på ett ställe per sida.template-page-custom-01 (custom-mall 1 för sidor)
template-page-custom-02 (custom-mall 2 för sidor)
template-search (sökresultat för wordpress)
template-single (standardmall för Inlägg)
template-archive (kategori- och tag-sidor)
template-archive-product (woocommerce sidor)
template-single-product (woocommerce produktsida)
-- OLD WW --Text
När det gäller texter så använder vi anpassade fält med taggen [cf]<namn>[/cf]. Namnstandard för anpassade fält är text-<sektion>. Observera att detta med anpassade fält endast ska användas för sidor och inte tex i Widget Wrangler.
-
Webassets
Webbspecifik kod lägger man upp med mediabiblioteket i Wordpress. Under utveckling så stänger vi av
- Inställningar -> Media
Organisera mina uppladdade filer i kataloger enligt månad och år
Detta för att alla bilder, script och css skall hamna under i rooten på upload. När sedan kunden skall skriva inlägg så ska denna vara aktiv så att bilderna laddas upp i rätt struktur <år><månad>. Det går även bra att länka in kod från webben via kända CDN-källor om man vill det.
Fonts
- Font Awesome - För ikoner på siten. Använd SVG & JS
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script>
- Google Fonts - Använd embed och custumize för att ställa in rätt kod på siten.
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
Bootstrap
- Get Bootstrap - Eftersom jquery är inkluderat i Wordpress så länkar vi ej in det.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
När det gäller bootstrap.css filen så använder vi node-sass för att generera den. Den filen läggs sedan in under temakatalogen/assets/css. Glöm inte att slå på Development Mode i Cloudflare under utveckling.
- Inställningar -> Media
-
Webbdokumentation
Dokumentation
https://developer.wordpress.org/themes/basics/template-files/#common-wordpress-template-files
https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch/
https://codex.wordpress.org/
https://codex.wordpress.org/Theme_Development#Template_File_ChecklistBootstrap templates (4.x)
https://colorlib.com/wp/free-bootstrap-4-website-templates/
https://medialoot.com/blog/10-most-promising-free-bootstrap-4-templates-for-201Lightbox
https://cdnjs.com/libraries/ekko-lightbox
Plugin:
WPML
Woody ad snippets - SupportforumSettings
Activate by Default: on
Complete Uninstall: off
Code style: default
Indent With Tabs: off
Tab Size: 2
Indent Unit: 2
Wrap Lines: off
Line Numbers: on
Auto Close Brackets: off
Highlight Selection Matches: on
-
Kodningsstandard
- Använd 2 space istället för tab
- Sätt inte startbracket på ny rad
- Använd samma namnstruktur som gruntprojektet har (camelCase i Nodejs, underscore_case i Wordpress)
-
Mallar
Defaultmallar som kan vara bra att använda om det skulle försvinna från dev
Mail back
<?php function j_mail() { $message = strip_tags(trim($_POST["message"])); if(strstr($message, '://')) { sleep(2); wp_die('', 200); return; } $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL); $name = strip_tags(trim($_POST["name"])); $phone = strip_tags($_POST['phone']); if(!filter_var($email, FILTER_VALIDATE_EMAIL) || empty($message) || empty($name) || empty($phone)) { wp_die('', 400); return; } $body = "Name: $name<br>"; $body .= "Number: $phone<br>"; $body .= "Email: $email<br>"; $body .= "Message: $message<br>"; $to = '[email protected]'; $subject = "Form: dev.jenkler.com - $email"; $headers[] = "Content-Type: text/html; charset=UTF-8"; $headers[] = "Reply-To: $name <$email>"; if(wp_mail($to, $subject, $body, $headers)) wp_die('', 200); else wp_die('', 400); } add_action('admin_post_mail', 'j_mail'); add_action('admin_post_nopriv_mail', 'j_mail'); ?>
Mail front
<h2>Kontakta oss gärna genom att fylla i uppgifterna</h2> <form action="/wp-admin/admin-post.php" id="ajax-contact" method="post"> <input type="hidden" name="action" value="mail"> <div class="form-group"> <label for="name">Namn</label> <input type="name" name="name" class="form-control" id="name" placeholder="Vad är ditt namn?" required=""> </div> <div class="form-group"> <label for="phone">Nummer</label> <input type="name" name="phone" class="form-control" id="phone" placeholder="Vilket telefonnummer kan vi nå dig på?" required=""> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" name="email" class="form-control" id="email" placeholder="Vad har du för e-postadress?" required=""> </div> <div class="form-group"> <label>Meddelande</label> <textarea class="form-control" name="message" placeholder="Beskriv kort vad behöver du hjälp med? Notera att meddelanden som innehåller länkar kommer automatiskt att raderas." rows="3" required=""></textarea> </div> <input type="submit" class="btn btn-primary" value="Skicka"> </form> <br> <h4> <div id="form-error" style="display: none;"> Någonting gick fel, maila gärna manuellt till adressen i foten på sidan. </div> <div id="form-ok" style="display: none;"> Tack för ditt meddelande! Jag återkommer så snart jag kan. </div> </h4> <script> var form = jQuery('#ajax-contact'); var formMessages = jQuery('#form-messages'); jQuery(form).submit(function(event) { event.preventDefault(); var formData = jQuery(form).serialize(); jQuery.ajax({ type: 'POST', url: jQuery(form).attr('action'), data: formData }).done(function(response) { jQuery("#form-error").hide(); jQuery("#form-ok").show(); jQuery(form).remove(); }).fail(function(data) { jQuery("#form-error").show(); jQuery("#form-ok").hide(); }); }); </script>
global-functions
function j_is_path($match = '') { global $j_path; if($match == '') return $j_path.'/'; else return strtolower($match) == $j_path ? true : false; } function j_textfields($atts, $content) { global $j_page_id; return get_post_meta($j_page_id, $content, true); } $j_path = strtolower(trim(current(explode('?', $_SERVER['REQUEST_URI'], 2)), '/')); if(!is_admin()) { if(j_is_path() == '/') $j_page_id = get_option('page_on_front'); else { $j_page_id = get_page_by_path(j_is_path()); $j_page_id = isset($j_page_id->ID) ? $j_page_id->ID : 0; } add_shortcode('cf','j_textfields'); wp_enqueue_script('jquery'); //wp_enqueue_style('jenkler', get_template_directory_uri().'/assets/custom.css'); wp_enqueue_style('dev', 'https://files.jenkler.com/_README/tmp/tmp/mastercoach.css?'.rand()); }
global-header
<meta charset="<?php bloginfo('charset')?>" /> <?php if(get_bloginfo('description') != '') { echo '<meta name="description" content="'.get_bloginfo('description').'">'; }?> <meta name="author" content="Jenkler IT AB"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title><?php wp_title()?></title>
global-map
if(!is_admin()) { function j_global_map_home() { get_header(); echo do_shortcode('[wbcr_snippet id="2722"]'); get_footer(); } function j_global_map_index() { get_header(); echo do_shortcode('[wbcr_snippet id="2718"]'); get_footer(); } }