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

apr 29, 2020

Funktioner og tilknytning i WP

Man kan udføre en Javascript funktion i WordPress hvor som. I det følgende beskriver jeg to måder at tilføje et JavaScript på.

Antag at vi gerne vil vise en tekst fra en JavaScript – fx stien til forælder temaet. Det lægger vi i en funktion på følgende måde i functions.php i child temaet

function custom_show_alert() {
  $cssURI =get_template_directory_uri().'/style.css';
  ob_start()   ?>
  <p> klik på knappen for at se lokationen for CSS filen </p>
  <button onclick="myFunction()">Vis sti</button>
  <script>
  function myFunction() {
       alert('<?php  echo $cssURI ?>');
  }
  </script>
 <?php
  return ob_get_clean();
}
add_shortcode('popup-uri','custom_show_alert');

Denne funktion henter først stien til en php-variabel,$cssURI, derefter lægges outputtet i en buffer ( ob_start() ). Derefter laver vi en kombination af html, JavaScript og php for at vise en knap, der ved klik udfører en alert, der viser indholdet af variablen. Tils sidst udfører vi en “ob_get_clean”, der både lukker outputstrømmen, og returnerer indholdet for det opsamlede. Resultatet er så en knap, som viser et alert vindue, når man klikker på knappen.

Denne funktion skal jo naturligvis kaldes for at blive udført. Men det er så spørgsmålet hvordan vi gør det. I denne situation har jeg valgt en short-code. Det vil sige, at man tildeler et navn, eller en alias til funktionen, og registrerer den under short ode. Navnet, som jeg har teldelt er ‘popup-uri’ og så skal jeg fortælle WordPress, at det skal i listen af shortcodes. Det gøres ved følgende statement:

add_shortcode('popup-uri','custom_show_alert');

Der er 2 ting at bemærke her.

1. I alert funktionen skal man skrive echo $cssURI;, hvis man bare skriver $cssURI; så bliver den ikke skrevet og funktionen går i fejl.
2. Funktionen, get_template_directory_uri henter forældretemaets uri og ikke childtemaets. For at hente childtemaets sti – så skal man skrive get_stylesheet_directory_uri
   

Udførsel af JavaScript overalt

Det andet eksempel er en simpel JavaScript alert vindue, der vises over alt. Denne placeres i en speciel fil i JavaScript mappen JS, og alt, der placeres i denne vil WordPress lægge i en <script> … </script> klammer. Denne fil, custom_alert_path.js indeholder følgende kode:

teksten = "Hello World";
//denne test er lidt tricky, det skal være !== ellers virker den ikke
if(teksten!==null) {
   alert(teksten);
} else {
  alert("teksten er ikke defineret");
}

Den sætter indholdet af variablen, teksten, i et alertvindue, hvis teksten ikke er null, ellers “teksten er ikke defineret”. Noter her, at for at være på den sikre side skal man teste med !== ellers virker det ikke.

Man skal nu fortælle WordPress, at dette script skal udføres globalt. Det vil sige vi registrerer scriptet og fortæller WordPress at udføre en add_action registrering

For at registrere scriptet laver vi en funktion i functions.php i childtemaet, Og så skal vi udføre funktionen ved en – add_action registrering. Registreringen af scriptet forløber, som følger

function custom_child_scripts()  {
  wp_enqueue_script('Alert sti' , get_stylesheet_directory_uri()
   . '/assets/js/custom_alert_path.js' );
}

Vi allokerer navet ‘Alert sti’ til scriptet, ved specifikation af dens sti. Da det ligger i child-temaets /asset/js/ mappe, skal vi specificere den. Og vi udfører en wp_enqueue_script, som en script.

Dette er dog ikke tilstrækkeligt. For vi skal jo også fortælle WordPress at udføre funktion, custom_child_scripts. Dette gør vi ved at udføre

add_action('wp_enqueue_scripts', 'custom_child_scripts');

Dette fortæller, at WordPress skal udføre funktionen og lægge scriptet i – listen af scripts

apr 25, 2020

WP loop og testudskrift

WordPress benytter sig af en loop, der henter indhold, som i forvejen er hentet ind via forespørgsel fra den tilhørende database. Alt bruger baseret indhold, såsom poster, sider, udgivne poster, eller kladder befinder sig i tabellen “posts”.

Når det drejer sig om udgivne indlæg, så henter database forespørgslen disse frem, Der oprettes så objekter af typen “post” og WordPress har en funktion, som henter disse frem, den hedder the_post(). Denne henter indhold fra forespørgslen og lægger den ind i template

med det format, som specificeret ved “get_post_format();

Vi kan nu checke hvilken template WordPress ved Twenty Seventeen bruger for at for at hente postene. Når det er indlæg, så bruger Twenty Seventeen skabelonen i filen archive.php. For et enkelt indlæg, – så bruges single.php. Hvis forsiden er en indlægsside, så bruges skabelonen, index.php. Men hvis forsiden er en side (page), så bruges, front-page.php. Og en almindelig side (ikke en forside), page.php. Skabelonerne er temaets kerne, og hvert tema har et antal skabeloner, som kan benyttes. Det varierer fra tema til tema.

Som et kuriosum kan nævnes, at alt indhold i WordPress gemmes i databasen, men det indhold, der vises har status af “publish”, og de gamle “inherit” eller “draft” eller noget andet. Det vil sige, alt hvad du propper af indhold i WordPress opbevares i databasen.

Notér også, at WordPress har en del funktionalitet-skabeloner til at vise sider, men det er op til temaerne at fylde dem med med indhold. Således, når Twenty Seventeen bliver initialiseret, udfører den en række initialisationer, som er obligatorisk, disse funktioner skal udføres tilstrækkeligt tidligt. Hvis man går til functions.php, ser man at initialiseringsfunktionen skal udføres som følger:

add_action( ‘after_setup_theme’, ‘twentyseventeen_setup’ );

Her er ‘twentyseventeen-setup’ initialiserings funktionen i Twenty Seventeen, og det skal udføres på et sted specificeret ved ‘after_setup_theme’. Add_action betyder, at funktionen skal udføres. WordPress har en række “hooks”, der fortæller hvad skal udføres, og hvor det skal udføres af det, som tilføjes til listen på vedkommende hook. Andre eksempler er add_shortcode, som indsætter en PHP kode ind i dokumentet.

apr 24, 2020

Templates i WordPress

WordPress opererer med de templates der stilles til rådighed fra det tema, der er aktivt. Man kan gå ind og rette i de forskellige templates, som får udseendet til at skifte. Fx kan man i den template, som hedder single.php (i Twenty Seventeen ) fjerne sidebar ved at fjerne get_sidebar().

Desværre er der en lille fejl i deres JavaScript fil, som hedder global.js ca. linje 124, som ikke tager højde for, at sidebaren kan være fjernet. Man kan sætte den ind i en if-sætning, som ikke udfører de linjer, der forudsætter en sidebar.

Man kan så gå ind og ændre css style for indlæggene, således at de får en bredde på 100% i stedet for 58%

Dette skal man naturligvis gøre i sit child-tema. Dvs sige man kopierer global.js til sit child-tema (husk hele stien skal kopieres), samt også single.php. Her kan man så foretage sine rettelser.

Vi har også taget den template, som hedder footer/site_info.php. Det er her WordPress har sin kode, som skriver “drevet af WordPress” Al den kode kan man så fjerne, og så tilføje sin egen html kode, sådan at footeren viser det indhold vi ønsker. Dette kan så formateres i style.css (i child-temaet). Alle brugerændrede klasser i css får en endelse -custom, for at sikre at man ikke kommer på kollisionskurs med WordPress egne klasser

apr 20, 2020

Problem med at fjerne sidebar

Hvis ikke man har check på sine indstillinger, så kan det gå galt med at fjerne sidebar fra single.php. Problemet er, at WordPress alligevel gerne vil læse en sidebar ind, og eftersom den ikke er defineret går den i fejl.

Her har jeg så lagt et enkelt indlæg som man kan tilgå via menuen. Det er et enkelt indlæg, der både har sidebar og footer, – altså bygget op efter skabelon i php-filen, single.php. Den kan jeg så prøve at lave eksperimenter på.

Fejlen viste sig at være en bug i en af JavaScript filerne, der kommer med temaet Twenty Seventeen. I filen global.js, som også arbejder med sidebar template, glemmer man at checke om der er en sidebar eller ej (ca. linje) 124. Jeg har rapporteret den som en bug til programmørerne..

apr 20, 2020

Ændre HTML i Child tema

Foruden at ændre i layout ved child temaets CSS fil, så kan man også lave om på HTML- strukturen ved at definere en modifikation af forældretemaets HTML. I tema Twenty Seventeen kan man gå ind i en fil , som hedder single.php og se hvilken elementer en html side bygges op af. Det foregår som følger:

1. Hent headeren (funktion – get_header(); )
2. indsæt to div-tags af klasse primary og main
3. Hent alle postene – brug post template, og eventuelle kommentarer – brug kommentar-template – dette gøres i en while løkke. ( while (have_posts ) :
4. Opdater post navigation (Forringe <– og –> næste)
5. Når alle indlæg er læst, tilføj sidebar ved get_sidebar();,
6. Til slut hent footeren ved get_footer();

apr 14, 2020

Flyt WordPress fra subdomæne til roddomæne

Posted on 10. november 2015 by kg-epel — Leave a reply

Situationen kan være sådan, at du har et websted i roden af domænet, og udvikler parallelt på samme websted i WordPress i et subdomæne. Når du er parat til at skifte over til WordPress webstedet kan det gøres ret simpelt i fire trin, men dog ikke helt uden komplikationer.

1. Du skal ændre din webstedsadresse ( Site address (URL) til websitet’s adresse fx folkemusik.kfmh.dk –> kfmh.dk. Det betyder at du ændrer webstedsadressen i databasen – det er tabel options, 2. række.
2. Du skal kopiere (ikke flytte) index.php og .htaccess filer til roden
3. I filen index.php har du en sætning, som følger:
   require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );
   Den skal du rette til:
   require( dirname( __FILE__ ) . ‘/folkemusik/wp-blog-header.php’ );
   Dette så at WordPress kan finde opstarts-filerne fra den nye placering
4. Hvis du har links relativt til roden i mappen “content”. Så skal du indsætte “/folkemusik/ foran for at WordPress stadigt kan finde undersiderne. Det vil sige i stedet for ./content/…side.html skal der nu stå
   /folkemusik/content/ …. side.html
5. Alle adressereferencer i databasen skal laves om. Derfor skal du i den oprindelige webside gå ind i kontrolpanelet –> indstillinger –> generelt og lave URL om til den URL, der gælder for den nye sted for dit website. Dette ændrer adressereferencerne i databasen, men du vil så ikke kunne komme ind i til det gamle sted. Det kræves derfor, at du har sikkerhedskopieret i forvejen. Alternativet er at bruge et plugin, som hedder duplicator. Men her risikerer du at få alt med i databasen, som ikke har relation til dit WordPress sted.

Bemærk, jo mere kompliceret webstedet er, jo flere tiltag skal der til inden omlægningen til WordPress er tilvejebragt. Endvidere skal du logge ind på wp-admin fra det gamle domæne, dvs hvis du har flyttet fra: folkemusik.kfmh.dk –> kfmh.dk skal du stadigt logge ind på folkemusik.kfmh.dk/wp-admin. Fordelen ved at flytte webstedsadressen er, at du ikke skal oprette nye WordPress tabeller, som er tilfældet hvis du blot kopierer og har to aktive WordPress installationer. Eneste måde for at undgå dette er at fjerne WordPress fra undermappen og kopiere den til rodmappen. Her kan du bruge samme tabeller med opdaterede links i tabel Options. Her kan man bruge opskriften fra forrige indlæg.

Demonstration af en short code. Husk at disse skal i child-temaets functions.php, ellers bliver det overskrevet ved opdatering af tema eller af WordPress selv.

[se-sti-til-css]

[popup-uri]