Monthly Archives: maj 2020

maj 19, 2020

Styre synligheden af indlæg og sider

Der opstår let situationer, hvor det kun er administrator / redaktør, der kan se indlæg eller sider.

WordPress er forsynet med en simpel styringsmekanisme, som kan bruges som følger: Når du opretter dit fx indlæg, så vælger du ‘Dokument’ går du i højre side, som vist på figuren.

Her vises oversigt for, hvordan synligheden af et indlæg kan styres. Du kan vælge

1. Offentlig, – hvor alle kan se indlæg/side
2. Privat, hvor indlæg/side kun er synlig for redaktør / administrator
3. Password beskyttet indlæg/side, hvor man skal angive et password for at se indholdet.

Her mangler dog den mulighed, at alle brugere, der er logget ind kan komme til at se indholdet, men dette kan tilføjes ved brug af et plugin. Fx WordPress Membership Plugin.

maj 11, 2020

Installering af Child theme

Dette er så live webstedet, som er blevet eksporteret fra localhost på min computer. Jeg har eksporteret alle indlæg, sider og mediafiler. De to første gik fint nok, men den kunne ikke importere mediabiblioteket.

Det man gør er at gå til kontrolpanelet, og indstillinger –> exporter. Se figur. Du vælger herefter, hvad du vil eksportere. Det kan være indlæg, sider eller mediabibliotek, – eller alt på een gang.

Dette er vist på figuren nedenunder:

Hvis du har valgt alt, som vist på figuren, tager WordPress alt indhold og lægger det i en XML fil, og den kan du siden uploade via import muligheden, som vist på den første figur. Der var dog et problem med mediabiblioteket, så det blev jeg nødt til at uploade via ftp.

Men alle child temaets ændringer fra installationen vises naturligvis ikke, det er man nødt til at uploade manuelt via ftp. Det man gør er som følger:

1. Pak child-tema mappen som zip-fil (gem den hvor som helst på computeren)
2. Så skal ind på administrationssiderne på dit websted og in d i temasiden. Øverst til venstre klikker du på “Tilføj ny”
3. Derefter klikker du “Upload tema” og vælger den zip-fil, der indeholder child temaet på din computer.
4. Derefter installerer og aktiver den.

Dermed er de fleste ændringer, som man har lavet i child-temaet på localhost kommet med på live-webstedet.

Det der ikke kommer med er den widget, som vi har lavet i footeren. Derimod er området Footer Author kommet med. Det man så skal gøre er at kopiere HTML koden fra widgetten på lokal-webstedet til en HTML widget på live-webstedet og trække den til Footer Author området.

maj 10, 2020

Add filter eksempler

Når man nu har muliggjort excerpts i Twenty Seventeen, så skal vi se, hvordan man kan ændre på længden af hver excerpt.

Den variabel, der styrer excerpt længden hedder excerpt_length. Du kan læse om den ved at google excerpt_length WordPress filter. Men du kan også gå til siden, https://codex.wordpress.org/ og der kan du så gå til  WordPress Code Reference!

Forsiden af WordPress Code Reference ser ud sådan

Hvis du skriver “excerpt” i søgefeltet får du

Klik på excerpt_length + søg, kommer du til følgende side

Klik på excerpt_length, og så får du opskriften på at ændre på excerpt_length

Hvis du har lyst til at gå til source koden, så kan du klikke på “trac”, for at se, hvordan den bruges. Hvis vi gerne vil lave det om til 100 ord, så har vi gjort som følger:

Det sidste eksempel drejer sig om at tilføje en custom avatar til diskussionspanelet. Når man går ind i diskussionspanelet, Indstillinger –> Diskussion

Dette er de standard avatars, som findes i diskussionspanelet. Men nu ønsker vi at tilføje et custom avatar. Og hvordan gør vi så det?

Igen må vi så ty til Code Reference og taster “avatar”, så får vi følgende resultat:

Der er så to ting, der er interessante. Avartar_defaults og funktionen get_avatar. Fra trac siden fremgår det, at standard avararne er

Og det vi ønsker er at tilføje en avatar. Det er sådan, at man også kan angive en URL til sit billede som “key” og et navn som værdi, sådan at vi får
$URL –> $navn som 8. element i dette array. Et eksempel
Vi skal altså lave en funktion, der tager $avatar_defaults som parameter tilføjer det 8-ende element og returnerer den igen, – og så tilføje det til filteret. Det bliver så som følger. tilføjelsen til arrayet i rødt:

function my_custom_avatar($avatar_defaults) {
//$myavatar ='https://freeiconshop.com/wp-content/uploads/edd/person-flat.png';
$myavatar = 'http://kg-epel.dk/wp-content/uploads/2020/05/profil-juli-2018.png';
//$myavatar = 'http://localhost/wp-test/wp-content/uploads/2020/05/profil-juli-
2018.png';
$avatar_defaults[$myavatar] = 'My new avatar';
return $avatar_defaults;
}
add_filter( 'avatar_defaults', 'my_custom_avatar' );

Jeg prøvede med forskellige URLs, men localhost URL-en ser ikke ud til at virke, – men når jeg bruger kg-epel.dk domænet virker det fint. Diskussionspanelet ser så sådan ud:

Og vi har fået vores custom avatar med.

maj 8, 2020

Excerpts i Twenty Seventeen

Det er ikke muligt at indstille Twenty Seventeen til kun at vise indlægs-oversigter. (Excerpts). Når man har mange indlæg er det mest fornuftigt, at man i sin oversigtsside har oversigter og ikke den fulde tekst.

Jeg fandt en artikel på Internettet, https://gist.github.com/westonruter/b924a2c6aaa746a477053472e06fc557
som giver et bud på, hvordan man kan vise oversigter frem for den fulde tekst i indlægs-oversigter.

Når Twenty Seventeen vil vise indlægs oversigter fx ved kategorier, benyttes benyttes skabelonen, archive.php. Og når det drejer sig om oversigt, så bruges filen,
template_parts/post/content.php. Forfatteren til denne side foreslår, at man ændrer koden lillesmpule o content.php, sådan at den kalder excerpt(), når det drejer sig om
oversigter. Den skal indsættes lige før <div class=”content”> det vil sige at vi erstatter koden

med det, der står neden under, således at den laver excerpts, når det ikke er en single post.

Proceduren er som følger

1. Kopier template_parts/post/content.php til dit child tema
2. Erstat kode fra linje 52 til 60 i content.php med det , der står nedenunder.
   

I alt skal der så stå som følger:

Når du så kigger på din category side eller overblik over indlæg skulle de gerne fremstå uddrag og ikke helte tekster.

maj 7, 2020

Tilføj menupunkt i Admin

Hvordan tilføjer man et menupunkt i Admin menu Kolonne? På billedet nedenunder betyder det at vi gerne vil tilføje et menupunkt i det område, som hedder Main Navigation

Det er altså i området med de forskellige indstillinger i den venstre side af billedet, – og vi ønsker at tilføje en øverste menu med en af de viste ikoner for til venstre. Hvordan gør man så det?

I sådan tilfælde her er det meget vigtigt at vide hvilke informationer man skal søge. Der findes to sider, som bruges som WordPress referencer

Men hvordan bærer vi os ad. Det hedder “add admin menu item” på engelsk, og hvis man googler wordpress add admin menu item

Ja, den foreslår en funktion, som hedder “add_menu_page()” i link, nr 2, og herfra kan du gå direkte til WordPress Developer Resources og læse mere om den. Bl.a står hvilket hook du bør benytte. Under “More information#” punkt nr. 2 står at, man bør benytte hooket, admin_menu, hvilket bliver til “add_action(‘admin_menu’, dit funktionsnavn); Så her følger proceduren

1. I functions.php i dit child tema skal du lave en funktion, som laver et menupunkt. Den kan hedde custom_menu_item() { }
2. Inde i den funktion kopierer du så funktionen, add_menu_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '', string $icon_url = '', int $position = null );
3. Du tilretter dine funktionsparametre, se nedenunder
4. Til sidst tilføjer du sætningen:
   add_action('admin_menu','custom_menu_item); Som fortæller WordPress, at den skal udføre funktionen, custom_menu_item() under hooket ‘admin_menu‘

Parametrene til funktion, add_menu_page er som følger:

1. $page_title: Teksten, der skal vises i titlen af den side, der vises, når man trykker på menuen,
   her har vi valgt ‘Menu titel’
2. $menu_title: Navnet på menuen, her teksten ‘Mit menupunkt’
3. $capability: Omhandler rettigheder til bestemte handlinger. Hver rolle består af en række capabilities, og vi skal her vælge en. Hvis du googler “roles and capabilities in WordPress” vises følgende link: https://wordpress.org/support/article/roles-and-capabilities/ og klikker du på den, så ser du liste over alle capabilities, som administrator har. Du skal nu vælge en, der retter sig mod manipulation af administrationsmenuen. Der er 2, som du kan bruge,
   1. edit_theme_options og
   2. manage_options. Man ser, at det nok er manage_options, man skal bruge, da det ikke kun retter sig mod temaer. så den 3. parameter skal være ‘manage_options’
4. $menu_slug. Det er adressen på den side, som der refereres til i punkt 1. Siden er ikke implementeret endnu, så vi bruger værdien, ‘mitplugin/mitplugin-admin.php’
   Notér, at hvis du laver en mappe under plugins, som hedder mitplugin og en php fil, der hedder mitplugin-admin.php under den, skriver noget i den, så vil menuen føre til denne side.
5. Callable $function=” er ikke obligatorisk, så vi angiver blot tom værdi ((‘ ‘). Når den er defineret kan den bruges til at outputte indholdet for siden.
6. Icon_url: URL til den ikon, der skal vises, – dette er heller ikke obligatorisk. Men vi vil gerne vise en ikon for menupunktet. Hvis du googler, icon-url for wordpress, så får du som første forslag, Dashicons | WordPress Developer Resources. Så ser man oversigt over dashikonerne, vi vælger en skruenøgle, som har navnet, ‘dashicons-admin-tools’
7. Den sidste parameter, $position angiver positionen af vores menuitem relativt til de andre. Den er også valgfri, men vi vil gerne have den til at blive vist sidst, så vi vælger 100

Alt i alt kommer vores kode til at se således ud,

maj 5, 2020

Shortcode med attributter

Hvis man nu tænker sig, at der var flere forfattere til indlæggene, man ville kunne vise hver forfatter med en enkelt shortcode, – så kan man give dem attributter. Fremgangsmåden er som følger:

1. Lav en funktion, her ‘custom_shortcode1($atts)‘, der behandler de indkomne parametre ( $atts ) i funktionskaldet
2. I funktionen skal du definere de attributter, der understøttes og forsyne dem med default værdier ($a ) her har vi to, ‘name’ og ‘from’
3. indsæt WP’s indbyggede funktion, $a = shortcode_atts($a,$atts) i funktione. Denne funktion udskifter de default værdier i array $a med dem, der kommer fra $atts, hvis de er definerede
4. i funktionen udfør ob_start() + output + return ob_get_clean();
5. tilknyt et shortcodenavn, fx ‘vis-forfatter ved:
   add_shortcode(‘vis-forfatter’,custom_shortcode1′);
6. indsæt shortcode med attributterne hvor som helst i dokumentet, fx
   [vis-forfatter name=”konrad B. Gislason” from=”spillefolk.dk”]

Trin 1-4 vises i den følgende figur

Selve shortkoden vises her, som indsat via trin 5.

Og til sidst sådan, som så WordPress viser forfatterinfoen. trin 6.

maj 4, 2020

Oprettelse af brugerdefineret widget område

Man kan også lave sit eget widget område. og så sætte fast et vilkårlig skabelon i WordPress. Man laver en widget med php-funktion, som registrerer en ny “sidebar” område, med et givent navn, identifikation og beskrivelse. Den består af en titel og indhold, yderligere 4 parametre beskriver hvilke html statements kommer før og efter.

I det følgende eksempel udskifter vi klipper vi html sætningerne, som giver forfatter info med en widget, der indeholder det samme.

Her følger opskriften for at lave et eget widget område:

1. Lav en brugerdefineret funktion i filen functions.php i child temaet , der opretter et registreret widget (sidebar) område, den kalder funktionen, register_sidebar(Streng-Array), hvor Streng-Array er et array, der indeholder de oplysninger, som widget området skal have. Antag at funktionen hedder, custum_author_widget_area
2. Lav en sætning,
   add_action(‘widgets_init’ , ‘custum_author_widget_area’);
   Denne sætning beder WordPress om at udføre funktionen, og den skal initieres som et widget område.
3. Nu skal du så specificere hvor dette område skal lægges. Altså find en skabelon, hvor man kan udføre en
   if(dynamic_sidebar(‘id’)) : else : endif;

Trin 1 og 2 vises i nedenstående figur

Her ser vi at vores funktion opretter et widget område, som hedder “Footer Author”, og identificeres ved “footer_author” og med en tilhørende beskrivelse. De sidste 4 elementer i arrayet specificerer hvilke html statements skal komme foran og følge efter hhv. selve widget og titlen.

I trin 3 skal vi så indsætte widget området. Dette gør vi i footeren, altså skabelonen, som indeholder forfatter oplysningerne. – site-info.php , se figuren

Den første figur viser stien til site-info.php. Figuren nedender viser kaldet af den sætning, der indsætter sidebaren med id ‘footer_author’

Noter, at man faktisk kan proppe alle mulige widgets ind.

Hvis man nu går ind i Udseende -> widgets, kan man se, hvis alt er gået rigtigt for sig, at der er kommet et nyt widget område, som hedder Footer Author.

Nu kan vi så tager vores HTML statements og proppe dem i en HTML widget og trække det ind i området. Dette er vist på figuren.

Figuren nedenunder viser en brugerdefineret HTML widget, hvor html sætningerne for Author, som tidligere var i site-info.php er nu indsat i widgetten.

Formattering af widget indhold 

For at få vores widget indhold til at se pænt ud, har vi brugt samme formatering som i kurset, det vil sige vi har tilføjet en styling for klasse “author-custom” i style.css for billedet som følger:

/*
* author information in footer styles
*/
.author-custom {
     float: left;
     border-radius: 50%;
     margin-right: 20px;
     width: 100px;
     height: 100px;
}

Dette er et eksempel på en widget, – man kan lave flere og placere dem hvor som helst i en skabelon.

[vis-forfatter name=’Konrad B. Gislason’ from=’kfmh.dk’]

maj 4, 2020

Ny skabelon for indlæg

Indlæg bruger skabelonen, single.php. Tidligere i kurset, så fjernede vi sidebaren, og formaterede sådan at sidebredden blev udnyttet helt.

Det bliver selvfølgeligt et pænt indlæg, men alle indlæg bliver så præsenteret ud fra den skabelon. Ved at oprette en brugerdefineret skabelon, vil denne eksistere sideløbende med standardskabelonen, og man kan vælge om man vil bruge den ene eller den anden. Det vil sige, at vi implementerer de ændringer fra style.css til brugerskabelonen.

Det vi skal gøre er følgende:

1. Kopier filen single.php fra forældretemaet og omdøb den til single-custom
2. Navngiv den nye indlægsskabelon, – her “Custom-posts”, det betyder, at WordPress nu viser navnet “Custom-posts” som mulighed for indlægsskabelon
3. Tilret skabelonen, og den klasse, hvor layoutet ændres, (.full-width-custom) i filen single-custom.php dvs- at vi skriver:
   <div id=”primary” class = “content-area full-width-custom“>, hvor det den røde skrift er den klasse, der tilføjes. Og den skal med magt overskrive bredden specificeret ved “content-area”
4. Slet kaldet til get_sidebar() efter primary-div blokken.

Når du nu opretter et nyt indlæg, så når du klikker på “Dokument ” i indlægsoversigten længst til højre, så vil du se muligheden for at vælge mellem to skabeloner, du kan oprette dit indlæg med.

maj 3, 2020

Bruger skabeloner for sider

Det valgte tema til at repræsentere ens indhold i WordPress indeholder forskellige skabeloner til både sider (pages) og indlæg (posts). Hvis man ikke er tilfreds med de skabeloner kan man lave et child-tema hvor man laver formateringen om på forskellige måder

1. Man kan lave custom css formatering i css filen i child-temaet, som overskriver formateringen fra forældretemaet. Dette vil så gælde alle sider eller alle indlæg.
2. Man kan lave nye sideskabeloner, som eksisterer sammen med de gamle. Og derved kan man også vælge om en side/indlæg skal sættes op i temaets skabelon eller i en bruger-oprettet skabelon.
3. Man kan oprette nye bruger widget områder. Dette omtales i næste indlæg.

For at lave en ny side eller indlæg-skabelon skal du først kopiere den eksisterende skabelon fra forældretemaet til child temaet. I twenty Seventeen bliver det til “page” for sider og “single” for indlæg. Dem omdøber vi så til page-custom.php og single-custom.php.

For at fortælle WordPress, at vi nu har en ny brugerskabelon, skal du i starten af filen give den en titel. Det første i en side ser ud som følger:

Og den nye har nu fået et navn, som WordPress finder og identificerer som en ny skabelon.
Nedenunder er der et billede af hvordan en almindelig side ser ud i Twenty Seventeen.

Det synes vi ikke at de altid skal se ud, så vores custom side template skal fremvise den på følgende måde:

Meningen er så, at man skal vælge mellem de to skabeloner, når man opretter en ny side.

Først kan man gå til den gamle siden, højreklikke og vælge “undersøg”, så finder man side-headeren og titlen, ser at formatteringen er som følger:

Den floater til venstre og er kun 36%. vi fjerner float : left og ændrer width til 100%. Desuden skal vi have overskriften i midten. (text-align : center). Så det ser sådan ud

På samme måde gør vi titlen 20px stor:

På samme måde gør vi entry indholdet 100% bredt:

Disse egenskaber skal vores nye sideskabelon indeholde. For at vi ikke kommer i karambolage med andre css. klasser, så laver vi nogle nye,

1. entry-header -> custom-header-page, som indeholder den ny formattering for entry header
2. page-title –> custom-title-page, formatering af titlen
3. entry-content -> custom-content-page, formatering af siden

og opretter dem i filen style.css i childt temaet. Nu mangler der 2 ting.

1. Vi skal omdøbe klasserne, i filen page, – og
2. vi skal specificere at det er en custom – indhold

Når vi ser på filen page-custom ser vi at klasserne ikke defineres der. Derimod hentes de fra en anden fil, ‘template-parts/page/content-page.php’ ved kald af funktionen,

get_template_part( 'template-parts/page/content', 'page' );

I funktionsreferencen for funktionen get_template_part står der bl. a.
For the $name parameter, if the file is called “{slug}-special.php” then specify “special”. I vores tilfælde er special=custom.

Men først skal vi lave en ‘template-parts/page/content-custom.php’ . Vi tager simpelt hen den fra forældre temaet (template-parts/page/content-page), kopierer den til child-temaet og omdøber den til “content-custom”. Derefter skal vi ændre koden i vores custom side til:

get_template_part( 'template-parts/page/content', 'custom' );

Det vil sige, at nu har vi udført step 2, så mangler vi bare at omdøbe klasserne i filen content-custom.php.:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="custom-header-page">
	<?php the_title( '<h1 class="custom-title-page">', '</h1>' ); ?>
	<?php twentyseventeen_edit_link( get_the_ID() ); ?>
    </header><!-- .entry-header -->
    <div class="custom-content-page">
	<?php
	    the_content();
            wp_link_pages(
		array(
		    'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
		    'after'  => '</div>',
	    ));  ?>
    </div><!-- .entry-content -->
</article><!-- #post-<?php the_ID(); ?> -->

Når man så opretter en side får man så valget mellem standard og custom:

Og når man vælger Custom, – så får man en side som Custom page vist oven for