Kristoffer Qvists blogg om allt möjligt

Etikett: PHP

Lägga till arkivsida i Grav

Eftersom detta är en blogg är det för mig naturligt att man har en så kallad ”arkivsida”. I denna kan man visa då samtliga inlägg skrivna en viss månad eller ett visst år. Det finns ett plugin till Grav som gör detta, men denna är inte automatiskt igång. Det finns förstås färdiga skelett som kommer med mycket färdiggjort, men väljer man däremot att skräddarsy sin sajt med enbart det man behöver bör man ha lite kunskap inom PHP, HTML och Twig.

Mitt inlägg är inspirerat av Bszymans inlägg, som behandlar just detta ämne. Även om pluginet har viss dokumentation på deras Github-sida, är den inte riktigt fullständig. Jag vill också lägga till vissa punkter som jag upplever att båda saknade.

Mål och förklaringar

Målet med detta är att skapa en arkivsida som kan användas i bloggen. Det andra målet är att bloggen skall kunna använda sig av en URL som är mer snarlik en svensk URL än en engelsk. Dock kan man välja att ha kvar de engelska kategorinamnen och ändra arkiv-urlen till engelska om man upplever att det skulle fungera bättre för sin blogg.

Jag använder mig av vissa ord och uttryck i nedan text, nedan finns dessa förklaringar:

  • grav-root Mapp/katalog där Grav är installerat
  • _temanamn Då alla teman heter olika, är det tänkt att detta skall vara samma tema du som läser använder

Välj tema som stödjer arkiv

För att minimera den tid som man behöver skräddarsy sin sajt, rekommenderar jag att man använder ett tema som stödjer arkiv-funktionen. Samtliga teman går att hitta på Gravs hemsida.

Installera och modifiera plugin

Själva pluginet kan installeras via kommandoraden, om man är under grav-root, skriver man bin/gpm install archives i kommandoraden. Pluginet kommer därefter att finnas under grav-root/user/plugins/archives. För att modifiera pluginet ändrar man i grav-root/user/plugins/archives/archives.yaml. Nedan visar jag ett exempel då man vill använda ”blogg” istället för ”blog” som kategori för blogginlägg:

enabled: true
built_in_css: true
date_display_format: 'F Y'
show_count: true
limit: 12
order:
    by: date
    dir: desc
filter_combinator: and
filters:
    category: blogg
taxonomy_names:
    month: archives_month
    year: archives_year

Nu kan man även kopiera arkivinnehållet från plugin till temat. Det gäller att man kopierar filen grav-root/user/plugins/archives/templates/partials/archives.html.twig till grav-root/user/themes/_temanamn/templates/partials/archives.html.twig

Om temat inte har stöd för arkiv, kan nedan kodrad behövas läggas till i grav-root/user/themes/_temanamn/templates/partials/sidebar.html.twig

{% if config.plugins.archives.enabled %}
  <div class="sidebar-content">
    <h6 class="sidebar--heading">Archives</h6>
    <hr class="hr--small">
    {% include 'partials/archives.html.twig' with {'base_url':base_url_relative} %}
  </div>
{% endif %}

Modifiera sidfältet

För att ändra arkivfältet i själva sidfältet, modifiera filen grav-root/user/templates/partials/archives.html.twig. Ändra nedan kodrad

{{ base_url }}/{{ config.plugins... }}

till följande:

{{ base_url }}/arkiv/{{ config.plugins... }}

Modifiera mall och själva arkivsidan

Nu gäller det att dels skapa mallen för arkiv och själva arkivsidan. Först skapas mallen. Skapa filen grav-root/user/themes/_temanamn/templates/arkiv.html.twig. I denna skrivs sidans utseende. Nedan finns ett exempel på hur detta kan se ut:

{% embed 'partials/base.html.twig' %}

    {% block content %}

        <h1>Arkiv</h1>

        <div class="infinite-scroll columns small-12 large-8">
        {% for post in page.collection({'items':{'@taxonomy':{"category": "blogg", "archives_month": uri.param("archives_month")}}}) %}
            {% include 'partials/post-item.html.twig' %}
        {% endfor %}

        {% if config.plugins.pagination.enabled and collection.params.pagination %}
            {% include 'partials/load-more.html.twig' %}
        {% endif %}

        </div>

        <div class="sidebar columns large-4 show-for-large">
            <div class="sidebar--inner">
                {% include 'partials/sidebar.html.twig' with {'blog':page} %}
            </div>
        </div>
    {% endblock %}

{% endembed %}

Mallen säger åt systemet att dels hämta sidans utseende, men också att hämta sidofältet. För att använda mallen i en sida måste denna sida nu skapas. Skapa mappen grav-root/user/pages/arkiv och filen grav-root/user/pages/arkiv/arkiv.md. Fyll i nedan innehåll i filen arkiv.md

---
content:
items:
    "@page.children": "/blogg"
---

Nu bör det finnas en fungerande arkivsida på sajten. Det finns förmodligen sätt att få den sidan ännu bättre, men sidan ser redan nu väldigt bra ut.

Lägg till stöd för logotyp i WordPress

Ibland kan man behöva modifiera WordPress efter ens egna behov, och då kan det handla om att ”gräva ned sig” i koden för att göra ändringarna. Ett exempel kan vara när man vill lägga till en logotyp till ett tema som inte redan stödjer detta. För min egna del krävde detta lite ”trial-and-error”, men till slut så fick jag kläm på det hela. Inlägget kommer att visa hur man gör det i en vanlig

För att exemplet nedan skall fungera krävs minst WordPress 4.5.

Till att börja med bör man modifiera filen functions.php, och detta kan man göra direkt i webbläsaren om man inte råkar ha en mer ”låst” installation, via redigeraren som man kan finna under fliken ”Utseende”. Därifrån väljs filen functions.php, i länken kan det stå Temafunktioner.

I funktionen function tema_setup() (där tema står för ditt aktiva tema) lägger du till följande kodsnutt:

add_theme_support( 'custom-logo', array(
	'height'      => 100,
	'width'       => 400,
	'flex-height' => true,
	'flex-width'  => true,
	'header-text' => array( 'site-title', 'site-description' ),
) );

Därefter läggs kodblocket nedan efter add_action( 'after_setup_theme', 'tema_setup' ); där tema återigen står för det aktiva temat.

function tema_the_custom_logo() {
	if ( function_exists( 'the_custom_logo' ) ) {
		the_custom_logo();
	}
}

Nu är vi nästan klara. Det som krävs nu är att lägga till funktionen tema_the_custom_logo(), eventuellt inom php-taggar, där vi vill ha loggan.

Om loggan behöver centreras, kan detta göras genom att lägga till följande kodblock i stilmallen style.css.

.custom-logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

Förmodligen kommer min lösning inte att fungera som ”handen i hansken” för alla, men jag önskar att den vägleder dem som undrar hur man ska sätta upp en logotype till sin sida. Som jag själv skrev tidigare, så var det inte självklart för mig till en början. Men efter lite lekande med koden, så gick det vägen med att få sidan att visa loggan som jag ville.

Egentligen är ”best practice”, eller praxis, att skapa ett så kallat ”child theme”. I och med att syftet med detta inlägg enbart är att visa hur man kan gå tillväga, så ansåg jag att det inte behövdes i inlägget eftersom att det finns en risk för att inlägget blir mer komplicerat än vad det behöver vara.

© 2022 qvi.st

Tema av Anders NorenUpp ↑