Modifiera ett WordPress-tema

Har en del gånger funderat över om jag ska modifiera det tema jag valt för denna webbplats. Jag har alltid kommit fram till samma svar. Att det inte är värt det för mig, om det innebär att jag skulle behöva göra ändringarna varje gång grund-temat uppdateras.

Men till slut satte jag mig och gjorde en sökning och hittade så klart en lösning. Det går att använda ett barn-tema, att ärva från ett annat tema och göra ändringar i barnet. Jag har följt anvisningarna på Wordress enligt länk 1 nedan.

Det jag vill göra är att modifiera sidhuvudet så att den tar mindre plats. Den vita ytan ovan bilden med texten och sökfunktionen, dessa vill jag flyta ovanpå bilden.

Låt oss tänka oss att jag vill modifiera temat med namnet ”twentyeleven”, då gör jag enligt nedan.

Filer

../wp-content/themes/
../wp-content/themes/twentyeleven-child/../wp-content/themes/twentyeleven-child/functions.php
../wp-content/themes/twentyeleven-child/style.css

Jag skapade en mapp under ../wp-content/themes/ som heter till exempel ”twentyeleven-child”. Att namnge barn-teman med ”child” i slutet är rekommenderat, men inget krav. Därefter skapade jag två filer, functions.php och style.css. I functions.php finns kod för att läsa in både stil från förälder-temat, och i style.css så finns så klart den stil-beskrivning som gör det jag vill.

functions.php

<?php
 /*
 2016-11-14
 Rickard Persson
 Following https://codex.wordpress.org/Child_Themes
 All I want is to change the header for the parent theme, to
 not use so much space.
 The function my_theme_enqueue_styles() is used to load the styles. First
 from the parent theme, and next from this child-theme.
 */
 function my_theme_enqueue_styles() {

 // Below is 'twentyeleven-style' for the Twenty Eleven theme.
     $parent_style = 'parent-style'; 

    // Parent style
     wp_enqueue_style( $parent_style, 
  get_template_directory_uri() . '/style.css' );
     // Child style
     wp_enqueue_style( 'child-style',
         get_stylesheet_directory_uri() . '/style.css',
         array( $parent_style ),
         wp_get_theme()->get('Version')
     );
 }
 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Funktionen visar hur man först läser från förälderns CSS, och sedan från barnets CSS. Med hjälp av ”get_template_directory_uri()” hämtas sökvägen från föräldern, och med ”get_stylesheet_directory_uri()” så hämtas sökväg till barnet. Att det finns fler invariabler när det läses in från barnet har jag inte tagit reda på orsaken till. Koden tycker jag är rätt så självförklarande i övrigt.

style.css

/*
  Theme Name:   Twenty Eleven Child
  Theme URI:    https://www.ripop.se
  Description:  Twenty Eleven Child Theme
  Author:       Rickard Persson
  Author URI:   https://www.ripop.se
  Template:     twentyeleven
  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:  twenty-11-child
 */
 /*
 Following the exelent documentation on 
 https://codex.wordpress.org/Child_Themes
 */

#branding hgroup {
     position: absolute;
 }

Här är det viktigt att man anger ”Template” som pekar på rätt ”förälder”. Man behöver inte ha med alla dessa poster som jag har gjort ovan. Tema-namn, beskrivning, template och kanske något annat kan behövas, är osäker på minimi-kraven. Det är dock alltid bra att fylla i så mycket som möjligt av den metadata som går att fylla i. Den ändring av CSS som jag gjort i slutet av filen är inte intressant att orda om i denna text.

Kommentar

Glöm inte att PHP-filer får inte avslutas med ”?>” som man normalt tänker sig, och som nästan alltid beskrivs att man ska göra i PHP-manualer. Jag hade nästan glömt bort detta och hade först en liten kris, och tänkte att jag inte skulle använda denna metod. Men när jag kom på att jag läst om detta att låta PHP-filerna avslutas öppna, så fungerade allt som det skulle.

Bör också nämnas att de ändringar som gjorts, innebär att layouten inte fungerar så bra på mindre skärmar. I en mobil så kläms sidhuvudet ihop, så att texten ”Rickard Persson …” göms bakom menyn. Det var mindre bra. Från vad jag kan tolka det så ställs vissa saker in i sidhuvudet dynamiskt, antingen via kod eller någon media-notering. Får se om jag hittar någon lösning på detta.

Länkar:

https://codex.wordpress.org/Child_Themes

2015-04-03

Att börja utveckla en komponent till Joomla 3.x

Hur jag tycker att man ska ta sina första steg, i dagsläget vill säga. Självklart kan mina åsikter ändras om ny kunskap dyker upp.

Syftet med detta inlägg är att beskriva hur jag sätter upp en enkel miljö för att utveckla en komponent till Joomla 3.x. Jag kommer att döpa komponenten till ”test”.

Verktyg jag använder i detta inlägg

Joomla installerad på lokal dator (~user/) (version Joomla! 3.4.1 – 2015-03-24)
Apache 2.4.10
Netbeans (version 8.0.2 – 2015-03-24)
Firefox (version 36.0.1)
Joomlas dokumentation – den är bra, bara man kommer förbi första tröskeln

Det viktiga här är att man installerar Joomla på den egna datorn och inte försöker jobba direkt mot en server. Självklart kan man säkert göra det också, men för att beskriva de första stegen tycker jag att man ska ha Joomla installerad på sin egen dator. Detta kräver så klart att man har en webb-server installerad på sin dator.

Att installera webb-server och andra nödvändigheter kommer inte att beskrivas i detta inlägg.

Bakgrund

Det har tagit mig ett tag att förstå vad jag håller på med, längre tid än jag vill erkänna. Jag har försökt följa Joomlas egen dokumentation om hur man skapar en komponent.

De första stegen som beskrivs där man ska skriva in en url för att se innehållet i en enkel text-fil, dessa fungerade aldrig för mig. I alla fall från början var det omöjligt att få dessa att fungera. Efter mycket experimenterande och flera tillfällen av att ge upp, så lyckades jag till slut hitta rätt genom att läsa ett svar på följande länk. Att lägga till XML-filen anger en person är lösningen. Vad som inte nämns är att det räcker om det finns en XML-fil i någon av ”componen”-mapparna, antingen under ”site” eller ”site/administration”. ”site” är den mapp där själva Joomla finns. Hur det ser ut visar jag nedan och du får så klart byta ut det jag angett med vinkel-parenteser före ”/administrator/..” till hur det ser ut för just din installation av webbserver och Joomla.

URLen som man kan testa om komponenten fungerar kommer att se ut som enligt nedan. Detta inlägg kommer bara att visa på vad som behövs för den administrativa delen.

<joomla-site>/administrator/index.php?option=com_test

Första filerna till komponenten test

I mappen där du har Joomla installerad hittar du en mapp som heter ”administrator”, därunder hittar du mappen ”components”. I mappen ”components” ska vi skapa en mapp som heter ”com_test” och några filer som jag beskriver i en träd-struktur nedan.

com_test
- test.php
- test.xml
- index.html

Mappen börjar med ”com_” för att det är en komponent som jag beskriver, du kan se att alla andra mappar i ”administrator” också börjar med ”com_”.

Innehållet i test.php kan vi för tillfället skriva vad som helst. Jag rekommenderar något i stil med nedan.

test.php

Detta är test.php som finns i mappen ../site/administrator/component/com_test"

Innehållet i index.html är en platshållare som är samma i alla mappar. I alla fall vad jag har kunnat förstå. Det finns säkert något tillfälle då ett annorlunda innehåll skulle kunna vara av värde, men för nu så ser innehållet ut enligt nedan.

index.html

<html><body bgcolor="#FFFFFF"></body></html>

Nu kommer vi till en fil som har lite mer krav på hur den ser ut, nämligen test.xml. Det är en fil som beskriver vad komponenten innehåller, vad den är och en hel del andra saker beroende på dig som utvecklare. Jag ska visa en enkel version som är till för att komma igång. Se gärna Joomlas dokumentation enligt länken tidigare i dokumentet.

test.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.2.0" method="upgrade">

    <name>test</name>
    <!-- Följande elemet är valfria, och har inga formaterings-begränsningar -->
    <creationDate>Mars 2015</creationDate>
    <author>Rickard Persson</author>
    <authorEmail>dummy@exempel.com</authorEmail>
    <authorUrl>exempel.com</authorUrl>
    <copyright>Copyright Info - test</copyright>
    <license>License Info - test</license>
    <!--  Versions-strängen registrerars i komponent-tabellen -->
    <version>0.0.1</version>
    <!-- Beskrivningen är valfri och är default samma som namnet -->
    <description>Beskrivning av test, en första genomgång</description>

    <administration>
        <!-- Administration Menu Section -->
        <menu link='index.php?option=com_test'>test</menu>
        <!-- Administration Main File Copy Section -->
        <!-- Note the folder attribute: This attribute describes the folder
            to copy FROM in the package to install therefore files copied
            in this section are copied from /admin/ in the package -->
        <files folder="admin">
            <!-- Admin Main File Copy Section -->
            <filename>index.html</filename>
            <filename>test.php</filename>
        </files>
        
        
    </administration>

</extension>

Jag har valt att inte översätta kommentarerna för administrations-avsnittet, då det finns risk att jag översätter så att det blir ännu svårare att förstå.

Vad som denna fil säger är att det är en ”komponent” då typen anger detta, dessutom vet vi att komponenten heter ”test” som kommer att genomsyra hela projektet och många av de klasser och filer som ska döpas enligt riktlinjer som har med PHP och Joomla att göra.

Vi kan även se att det finns två filer som är kopplade till administration.

Aktivera den ”nya” komponenten

Om vi nu försöker att se vad filerna innehåller genom Joomla genom länken som jag angav tidigare och repeterar här så kommer det inte fungera. Vi kommer att få ett felmeddelande som säger att sidan saknas.

<joomla-site>/administrator/index.php?option=com_test

Så vad behöver vi göra? Jo, vi måste in i administrationen för Joomla-siten och in i ”Extention manager” där vi väljer meny-alternativet ”Discover”. Där klickar vi på knappen ”Discover” för att Joomla ska läsa av XML-filen som vi lade upp i mappen ”../administrator/components/com_test/”. När Joomla hittar komponenten så får vi alternativet att installera komponenten, och det ska vi göra. Därefter kan vi hitta komponenten under meny-alternativet ”Components”, och väljer vi där komponenten vi precis har installerat så kommer vi att se innehållet i den PHP-fil som vi tidigare har skapat.

Börja skriva koden

Nu när komponenten finns aktiverad i Joomlas system är det bara att fortsätta att skapa och ändra i koderna. Och vi behöver inte hålla på med att installera/uppdatera komponenten bara för att vi gör någon liten ändring, det är bara att uppdatera webbläsaren med en page-reload.

Vad kommer sedan

Något jag kommer försöka lära mig att förstå är hur jag bäst ska hantera debugging när jag utvecklar till Joomla. Det finns några alternativ som jag ska titta närmare på, och ska försöka återkomma om det.

Det är nämligen rätt vanligt att man möts av en helt blank sida och man har ingen aning om var i koden felet har sitt ursprung, så någon typ av debugging-hantering är nödvändig för att klara av att hantera alla de tillfällen då man skriver en kod som är en bit från att vara perfekt. Men det är i ett annat inlägg.

Jag hoppas att detta gör det lättare att komma igång med Joomlas egen beskrivning av utveckling av en enkel MVC-komponent.

2015-02-032016-09-16

Starta ett program med fördröjning – KUbuntu 14.10

Jag stötte idag på ett problem där jag behövde starta ett program efter några sekunder, och letade på nätet efter hur man kan göra och självklart hittar man lösningen. Denna gång utan allt för mycket svårigheter. I det här fallet skulle jag starta en ljudspår efter 10 sekunder.

Eftersom jag inte tror att det finns en lösning i grafiskt läge, utan jag behöver en lösning i terminal, så visade det sig att problemet bestod av två delar. Exemplet nedan visar hur jag använder upplägget. Fungerar även utan parentes, vet inte vad dessa gör.

(echo "sleep"; sleep 10 ; echo "playing") | play sound.mp3

Del ett – program att spela ljudfiler

Del ett var att hitta ett program som kunde spela upp en ljudfil, det blev programmet ”play” som finns i paketet ”sox”. Dessutom visade det sig att jag behövde lägga till stöd för mp3.

sudo apt-get install sox libsox-fmt-all

Jag hade säkert inte behövt installera libsox-fmt-all, när det i det här fallet bara var mp3-stödet som behövdes.

Del två – skapa fördröjning

Del två var att skapa en fördröjning innan play skulle köras igång. Ett enkelt sätt var att använda kommandot ”sleep”. För 10 sekunders fördröjning skriver visas i exemplet nedan.

sleep 10

Nu trodde jag att det var att bara pipe:a (|) ihop dessa två lösningar, men se det gick inte. Play körde igång direkt utan fördröjning. Så jag var tvungen att hitta ytterligare en lösning på ett problem. Det visar sig att man måste klä ”sleep” med någon typ av output. Och svaret ser ni i början där jag lagt till detta. Den första ”echo” kommer att skrivas ut, men verkar inte behövas egentligen för att få ”sleep” att fungera som tänkt. Den andra ”echo” skrivs inte ut vad jag kunnat se. Verkar vara så att den andra ”echo” skickas som input till programmet efter pipe-tecknet.

Om du inte läste rubriken så kör jag KUbuntu 14.10 när detta skrivs.

Länkar

Första två länkarna har med uppgiften att göra, övriga tre länkar har med pipe att göra.

http://linux.die.net/man/1/play
http://stackoverflow.com/questions/15491222/bash-timed-piping

http://man7.org/linux/man-pages/man2/pipe.2.html http://www.linfo.org/pipes.html
http://stackoverflow.com/questions/1072125/how-does-piping-work-in-linux

2014-11-012014-11-01

Loggning från ett bash-script

Jag kom att tänka på att loggning till syslog skulle vara bra när man skriver egna script, så jag har lagt till stöd för detta i mitt script för att göra backup. Jag kommer inte här att visa den delen av scriptet, utan jag visar hur man gör med loggningen.

Detta körs på Ubuntu, men borde fungera även på andra distar.

Jag har använt programmet ”logger” som installeras med paketet ”bsdutils”.

sudo apt-get install bsdutils

Skriver du i bash

~$ logger Test

så kommer det att visas i /var/log/syslog som

<date-and-time> <computer-name> <user>: Test

Kan man då visa variabler i den text som logger skickar till syslog? Ja-visst kan man det.

#!/bin/sh
VAR1="BLABLA"
logger "Test of variable: VAR1 = $VAR1"

Detta lilla script kommer då att se ut något som följer i syslog

<date-and-time> <computer-name> <user>: Test of variable: VAR1 = BLABLA

Självklart ska man inte skriva ”~$” för det är prompten i bash som ibland ser ut så.

Versioner

~$ logger --version
logger from util-linux 2.20.1

~$ bash --version
GNU bash, version 4.3.11(1)-release (x86_64-pc-linux-gnu)

Länkar

2014-08-18

Beräkna hur lång tid ett bash-script tar

Jag har länge tänkt att jag ska fixa en tid-tagning för några av mina bash-script, men det har aldrig blivit av, förrän nu.

Jag har egentligen inte gjort så mycket själv, annat än att Googla efter rätt information. Jag sökte med ”bash calculate time difference” och då hittade jag följande länk.

# sTime - indicates start of execution
# eTime - indicates end of execution
# dTime - indicates difference between sTime and eTime
# at the end of the script I calculate time for execution

sTime=$(date +"%s")
# här ligger det skript jag har som jag vill beräkna tiden den tar på sig
eTime=$(date +"%s")
dTime=$(($eTime-$sTime))
echo ""
echo ""
echo "##########################"
echo "Time: $(($dTime / 3600 )) hours $((($dTime % 3600) / 60)) minutes $(($dTime % 60)) seconds"
echo "##########################"
echo ""

Något jag upptäckte var att det är kritiskt med blanktecken och parenteser på olika platser. Tex sTime=$(date +"%s") behöver ett mellanslag mellan date och +. Jag skrev första gången ihop dessa och då fungerade det inte. Jag tyckte först inte att det behövdes dubbla parenteser runt beräkning av dTime, men se det fick jag också ångra.

Du kan så klart använda andra namn på variablerna och annan text. Och ja, jag försöker så gott det går att använda engelska när jag skriver kommentarer i min kod. Det går inte att komma från att svenska är ett udda språk för oss som är utvecklare. Då 99% av all hjälp som finns att få på nätet skrivs på engelska så är det bara naturligt att fortsätta på den vägen.