WORDPRESS::Aanpassen
AANPASSEN
Webpagina's verder customizeren
CSS Editor
Aan het uiterlijk van de site moeten nog enkele zaken naar eigen wens aangepast worden. Het leeuwendeel doen we door aanpassingen in de CSS. Hiervoor gebruiken we de geïnstalleerde plugin Site Origin CSS Editor. Het verschaft visuele menu opties voor het bewerken van het uiterlijk van de site. Ga hiervoor naar Dashboard > Weergave > Custom CSS
Het moeilijkste van het bewerken van het design met CSS is gewoonlijk het vinden van de te gebruiken selector. De krachtige inpector van SiteOrigin maakt dat makkelijk. Terwijl de preview van de site bekeken wordt is het gewoon een kwestie van het selecteren van een element en de inspector helpt met de identificatie van de beste selector voor het bedoelde element.
PHP Hacks
Toch zijn er ook nog aanpassingen die alleen maar door 'hacks' in de PHP tot stand kunnen worden gebracht. Deze worden gedocumenteerd in de tweede sectie van deze pagina.
Positie Menubar
In het thema AllX-premium staat de menubar aan de top van de pagina. Wij willen dit direct onder de Header.
Met de Inspector van CSS Editor selecteren we het menu van de blog. Het identificeren van de juiste selector doen we door terug te gaan langs de breadcrums bar tot het punt dat de selector de menubar insluit (groen blok). In ons geval is dat: #menu-top.menu-cont.rp-menu
In de linker kolom kunnen we nu kiezen voor het wijzigen van tekst, decoratie of layout.
Als we in de editor een wijziging aanbrengen in bijvoorbeeld de Hoogte van de het menu blok, dan zien we aan de rechterzijde direct het resultaat in onze blog. Op deze manier confirmeren we meteen ook dat we de juiste selector te pakken hebben.
Voor het plaatsen van de menubar direct onder de header van onze blog maken we de volgende settings:
/*Menubar onder header image*/
/*alleen desktop*/
@media (min-width:1025px) {
#menu-top.menu-cont.rp-menu {
top: 449px;
background-color: #faf5f5;
height: 50px;
}
}
@media (min-width:1025px)
Deze wijziging willen we alleen doorvoeren voor weergave op de desktop. Dit doen met @media (min-width:1025px) { ... }
Hierdoor wordt de custom CSS alleen toegepast op mediums die breder zijn dan 1024 px. Als het medium kleiner is dan 1025 px wordt deze geclassificeerd als een tablet of mobiel.
Menu weergave
Met voorgaande CSS is de menubar verplaats naar direct onder de headerimage.
Nu passen we de weergave van het menu verder aan.
Hiierbij maken we onderscheid tussen de weergave op een desktop of op een tablet
of mobiel.
Voor desktop: @media (min-width:1025px) {...}
Voor mobiel of tablet: @media (max-width:1024px) {...}
Voor de menuweergave maken we de volgende settings:
/*Menu weergave*/
/*desktop*/
@media (min-width:1025px) {
.menu-and-detiles {
height: 40px;
left: 180px;
}
}
/*mobile*/
@media (max-width:1024px) {
.menu-and-detiles {
height: 0px;
left: 0px;
padding: 0px 0;
top: -60px;
}
}
/*mobile*/
@media (max-width:1024px) {
.mobile-cont {
background: inherit;
}
}
/*mobile*/ @media (max-width:1024px) {
.grid-top.grid-top {
padding: 0px;
}
}
Top Content blok
Door het plaatsen van de menubar onder de header (bij de desktopweergave) hangt deze als het ware over het contentblok.
We laten de content daarom iets later beginnen en wel hetzelfde aantal pixels als de hoogte van de menubar.
/*Contentblok iets omlaag onder menu*/
/*alleen desktop*/
@media (min-width:1025px) {
#content.site-content {
position: relative;
top: 50px;
bottom: -15px;
}
}
Positie Vlinder Logo
Het logo is onderdeel van de menubar.
Doordat wij de menubar verplaatst hebben is ook het logo zwervend.
We willen de vlinder op een desktop weergeven in de header image en bij een mobiel naast met menu boven de header.
/*Positie vlinder*/
/*desktop*/
@media (min-width:1024px) {
.custom-logo {
position: relative;
left: -522px;
top: -180px;
}
}
/*mobile*/
@media (max-width:1024px) {
.custom-logo {
left: -522px;
top: -100px;
}
}
Iconbar verbergen
Boven de content is ook nog een blok voor Icons.
Er wordt geen gebruik gemaakt van Icons en dit blok is dus leeg, maar omdat er margins ingetseld zijn neemt het blok toch ruimte in.
We zetten de margins naar nul.
/*Correctie margins van verder verborgen blok*/
.at-icons {
margin-bottom: 0px;
margin-top: 0px;
}
Positie Blognaam en beschrijving
/*Positie blog naam en beschrijving*/
/*alleen desktop*/
@media (min-width:1025px) {
.site-branding {
top: 265px;
}
}
Widget Blok Vormgeving
De widgets zijn geplaatst in de kolom rechts.
De layout krijgt de nodige aanpassingen.
/*Widgets Vormgeving**
**********************/
/*Font en achtergrondkleur setting*/
#secondary.widget-area .widget-title {
color: #000000;
font-size: 18px;
background-color: #e5b7eb;
text-align: center;
}
/*verwijder paddings en een margin*/
#secondary.widget-area .widget {
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
margin-bottom: 0px;
}
/*centreren van Categorieen, Zoeken en Abonnees*/
form {
padding-left: 10%;
padding-right: 10%;
}
Categoriën Widget Instellingen
/*CATEGORIËN instellingen
***********************/
#cat.postform {
text-align: right;
border-color: #050505;
border-style: solid;
border-width: 1px;
border-radius: 0px;
color: #0a0909;
}
/*Nadere uitlijning van Categorien dropdownbox*/
select {
padding-left: 10%;
padding-right: 10%;
}
Archief Widget Instellingen
/*ARCHIEF centreren
*****************/
#archives-dropdown-10 {
margin-left: 10%;
width: 80%;
}
Favorieten Widget Instellingen
/*FAVRIETEN Widget
*****************/
#list-5.widget.widget_link_list ul li a {
font-size: 11pt;
text-align: left;
margin-left: 25px;
}
Beheer Meta Widget Instellingen
/*BEHEER metawidget
*****************/
/*centreren text Beheer*/
#custommetawidget-10.widget.customMetaWidget {
text-align: center;
}
/*fontsize metawidget Beheer*/
#custommetawidget-10.widget.customMetaWidget ul li a {
font-size: 11pt;
}
Zoek Widget Instellingen
/*ZOEK Widget instellingen
************************/
/*vormgeving 'zoeken' veld*/
.widget_search .search-form .search-field {
border-width: 1px;
border-style: solid;
border-color: #171414;
border-radius: 0px;
max-height: 6px;
margin-bottom: 7px;
padding-bottom: 11px;
padding-top: 10px;
text-align: left;
}
/*vormgeving 'zoeken' button*/
.widget_search .search-form .search-submit {
font-size: 12px;
border-radius: 0px;
padding-top: 8px;
padding-bottom: 8px;
color: #faf2f2;
text-shadow: 0 -1px 1px #cc5500;
box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, #000 0 10px 15px -10px;
background-image: linear-gradient(#482259, #9469a6, #482259);
}
Abonneer Widget Instellingen
/*ABONNEER Widget
***************/
/*widget fontsize*/
#email-subscribers-form-4.widget.widget_email-subscribers-form {
font-size: 13px;
}
/*vormgeving email-subscribers input veld*/
#email-subscribers-form-4.widget.widget_email-subscribers-form input {
border-width: 1px;
border-style: solid;
border-color: #171414;
border-radius: 0px;
margin-bottom: 7px;
padding-bottom: 10px;
padding-top: 10px;
}
/*nadere vormgeving email-subscribers input veld 'text'*/
#email-subscribers-form-4.widget.widget_email-subscribers-form input[type="text"] {
max-height: 6px;
}
/*nadere vormgeving email-subscribers input veld 'email'*/
#email-subscribers-form-4.widget.widget_email-subscribers-form input[type="email"] {
max-height: 6px;
}
/*vormgeving email-subscriber button*/
.es_subscription_form .es_submit_button {
font-size: 12px;
border-radius: 0px;
padding-top: 8px;
color: #faf2f2;
text-shadow: 0 -1px 1px #cc5500;
box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, #000 0 10px 15px -10px;
background-image: linear-gradient(#482259, #9469a6, #482259);
}
Bericht Aanvullende Vormgeving
/*POST aanvullende layout
**************************/
/*lijn onder de post titel*/
.entry-header .entry-title {
margin-top: 0;
margin-bottom: 15px;
border-bottom-width: 1px;
border-bottom-color: #0b0b0c;
border-bottom-style: solid;
}
/*lijn boven de aftiteling*/
.entry-footer {
border-top: 1px solid rgb(5 ,1, 1);
margin-top: 10px;
}
/*CONTENTbody Titelkleur
***********************/
/*kleur van titels in de content*/
#main h1.page-title {
color: #f7f0f0;
}
Reactie Vormgeving
/*SINGLE pagina en Comments layout
**********************************/
#reply-title.comment-reply-title {
color: #f7f0f0;
}
#commentform.comment-form {
color: #f7f0f0;
}
#commentform .logged-in-as a {
color: #f7f0f0;
}
#comments .comments-title {
color: #f7f0f0;
}
.postnav .dashicons {
color: #f7f0f0;
}
.postnav a {
color: #f7f0f0;
}
#commentform.comment-form .form-submit input[type="submit"] {
font-size: 12px;
border-radius: 0px;
padding-top: 8px;
color: #faf2f2;
text-shadow: 0 -1px 1px #cc5500;
box-shadow: inset #ebab00 0 -1px 1px, inset 0 1px 1px #ffbf00, #cc7722 0 0 0 1px, #000 0 10px 15px -10px;
background-image: linear-gradient(#482259, #9469a6, #482259);
}
Aanvullende vertalingen
Loco Translate
Wordpress is in hoge mate vertaald in het nederlands.
Maar in het thema en sommige plugins ontbreken toch nog meerdere Nederlandse termen. Voor het admin gedeelte is dat geen probleem omdat voor mij Engels soms nog duidelijker is.
Voor de lezers van de blogs is dit niet wenselijk en rommelig.
Van de relevante teksten kunnen ontbrekende vertalingen worden gemaakt met de plugin Loco Translate
Thema AllX-premium
Lokale custom vertaling thema 'AllX-premium':
Voor 'AllX' zijn geen Nederlandse vertalingen meegeleverd.
We gebruiken het door de developer meegeleverde templatebestand ../wp-content/themes/allx-premium/languages/allx.pot
- Kies 'Loco Translate' > Themes > AllX.
- Selecteer '+ New Language'.
- In het scherm wat nu opent selecteren we als taal: Nederlands en als locatie de Custom locatie ../languages/loco/themes/allx-nl_NL.po
(/var/www/html/blog/wp-content/languages/loco/themes/allx-nl_NL.po) - Selecteer 'Start translating'.
De te vertalen tekst is snel te vinden vie de zoekfunctie, begin gewoon met het typen van de te vertalen Engelse tekst. De vertalingen beperken we tot wat de lezer van de blogs te zien kan krijgen:
| Engels | Nederlands |
 |
|
| Previous | Vorige |
| Next | Volgende |
| One thought on “%1$s” |
1 Reactie op “%1$s” |
| %1$s thought on “%2$s” |
%1$s Reactie op “%2$s” |
| %1$s thoughts on “%2$s” | %1$s Reacties op “%2$s” |
| Edit <span class="screen-reader-text">%s</span> | Bewerken <span class="screen-reader-text">%s</span> |
| Nothing Found |
Niets Gevonden |
| Page %s | Pagina %s |
| Pages: | Pagina's: |
| Sorry, but nothing matched your search terms. Please try again with some different keywords. | Sorry, maar er is geen resultaat dat overeenkomt met de gegeven zoekterm. |
| Search Results for: %s | Zoek resultaat voor: %s |
| %1$sSearch results for: %2$s | %1$sZoek resultaten voor: %2$s |
| Leave a Comment<span class="screen-reader-text"> on %s</span> | Reageer <span class="screen-readerR-text"> op %s</span> |
Voorbeeld Lokale Plugin Vertaling
In de 'WORDPRESS::Plugins en Wizards' sectie Icegram Express - Email Subscribers wordt de optie van aanvullende vertalingen genoemd.
Deze vertalingen slaan we lokaal op om te voorkomen dat ze verloren gaan bij Wordpress Updates.
Lokale custom vertaling 'Icegram Express - Email Subscribers':
De vertalingen meegeleverd door de Email Subscribers developer zijn geplaatsts in de map: ../wp-content/languages/plugins/. We zien hier de bestanden email-subscribers-nl_NL.mo en email-subscribers-nl_NL.po.
Op dit moment, 14 maart 2024, is Icegram Express - Email Subscribers 100% vertaald naar Nederlands.
Door Nederlandse Wordpress gebruikers kunnen vertalingen gemaakt worden en deze worden opgeslagen in de map ../wp-content/languages/plugins.
In deze laatste folder worden bij Wordpress Updates ook automatisch de laatste (Nederlandse) vertalingen van geïnstalleerde plugins geplaatst. Let wel, dit zijn dus vertalingen niet gemaakt door de developer, maar door gebruikersgroepen.
In ons geval met Email Subscribers resulteerde dit in het verleden in een 'bug' toen de developer bij een update van de plugin een wijziging aanbracht in de engelse brontekst. Door deze afwijkende brontekst ontstond een tekst waarvoor geen overeenkomende Nederlandse vertaling bestond.
Voor een eigen lokale custom vertaling is het daarom zaak dat we voor de brontekst de laatste door de plugin developer meegeleverde template gebruiken.
Voor Email Subscribers is dat het templatebestand ../
wp-content/plugins/email-subscribers/lite/languages/email-subscribers.pot
In het geval dat van de plugin geen (volledig) templatebestand meegeleverd is wijken we uit naar een kopie van de brontekst van een wel meegeleverde taal, bijv. email-subscribers-de_DE.po .
- Kies 'Loco Translate' > Plugins > Icegram Express - Email Subscribers, Newsletters and Marketing Automation Plugin.
- Ga naar 'German' en selecteer 'Copy'.
- In het scherm wat nu opent selecteren we als taal: Nederlands en als locatie de Custom locatie ../wp-content/languages/loco/plugins/email-subscribers-nl_NL.po
- Bij template options kiezen we voor het alleen kopieren van de Engelse brontekst.
- Ga nu terug en kies opnieuw 'Loco Translate' > Plugins > Icegram Express - Email Subscribers, Newsletters and Marketing Automation Plugin en we zien nu dat er voor Nederlands twee keuzes zijn (Custom en System).
- Kies hier 'Edit' optie van de Nederlandse 'Custom' versie.
Alternatief: Als éénmaal een lokale versie met vertalingen bestaat kan deze ook 'gesynchroniseerd' worden met een update met nieuwe brontekst. Door het synchroniseren worden nieuwe en/of gewijzigde bronteksten opgenomen in het custom (lokaal) bestand. Voor deze nieuwe brontekst kunnen we dan de vertalingen maken.
Aanpassen met PHP Hacks
Helaas lukt het niet helemaal de Wordpress Bolg geheel naar onze hand te zetten zonder edits (hacks) uit te voeren in enkele PHP bestanden.
Het grootste risico is dat er in de loop van de tijd mogelijk updates in het Thema 'Layout Builder' of het parent thema 'SG Window' uitkomen. Der door ons zelf gemaakte hacks worden dan overschreven.
Het is daarom zaak een kopie op te slaan van het originele ongewijzigde bestand (geef deze een extra extensie: .parent). Omdat een update mogelijk automatisch uitgevoerd wordt moeten we ook een kopie bewaren van het gehackte bestand (en geef deze de extra extentie: .bck).
Na een update moeten we controleren of er wijzigingen (updates) gemaakt zijn in het betreffende bestand. Als dat niet het geval is kunnen we het bestand met de .bck extentie terugzetten.
Als daarentegen het nieuwe bestand wel updates bevat dan moeten we (na een .parent kopie gemaakt te hebben) onze hacks opnieuw in de bestanden aanbrengen.
Uploads en Updates zonder FTP
Wordpress is ingericht om alle activiteiten zoals Updates/Themes/Plugins en Uploads via FTP naar de remote server bij de provider uit te voeren. In mijn geval draai ik mijn eigen lokale server en is het gebruik van FTP onnodig omslachtig.
Directe communicatie is echter mogelijk door een toevoeging te plaatsen in wp-config.php:
- # cd /var/www/html/blog/
- # cp -a wp-config.php wp-config.php.org
- # vi wp-config.php en maak onderstaande Edit
- # cp -a wp-config.php wp-config.php.bck (bewaar kopie van gehackte bestand)
Edit wp-config.php en voeg aan einde toe:
/**
* Toegevoegd B. Makkink 20-10-2016
* Transfer methode 'direct' in plaats van default 'ftp'
*/
define('FS_METHOD', 'direct');
Maak deze hack in het begin van het installeren van Wordpress
Read More Button
Default geeft het thema AllX de blog berichten op de pagina's ingekort (excerpt) weer en wordt er een Read More Button plaatst.
In de Customizer is er de optie dit uit te schakelen en worden de berichten volledig weergegeven.
Dit werkt echter alleen voor de blog- en archiefpagina.
Om dit ook voor de Categoriën- en Zoekresutatenpagina te bewerkstelligen zijn er voor deze pagina's een hack nodig.
Categoriën pagina
../blog/wp-content/themes/allx-premium/category.php
- # cd /var/www/html/blog/wp-content/themes/allx-premium/
- # cp -a category.php category.php.org
- # vi categories.php en maak onderstaande Edit
- # cp -a category.php category.php.bck (bewaar kopie van gehackte bestand)
Edit category.php en zoek rond regel 52 naar 'the_excerpt'
52 the_excerpt();
en wijzig dit naar
52 the_content();
Zoekresultaten pagina
../blog/wp-content/themes/allx-premium/template-parts/content-search.php
- # cd /var/www/html/blog/wp-content/themes/allx-premium/template-parts/
- # cp -a content-search.php content-search.php.org
- # vi content-search.php en maak onderstaande Edit
- # cp -a content-search.php content-search.php.bck (bewaar kopie van gehackte bestand)
Edit category.php en zoek rond regel 39 naar 'the_excerpt'
39 the_excerpt();
en wijzig dit naar
39 the_content();
Meta-Footer onder blog
In het AllX thema staan de metadata zoals aanmaakdatum, auteur, categorie, reacties, etc in wat WP de footer noemt, maar in het thema is deze footer gek genoeg boven het bericht geplaatst.
Om deze op de gebruikelijke plaats onder het bericht te krijgen is onderstaande hack nodig van
../blog/wp-content/themes/allx-premium/template-parts/content.php
- # cd /var/www/html/blog/wp-content/themes/allx-premium/template-parts/
- # cp -a content.php content.php.org
- # vi content.php en maak onderstaande Edit
- # cp -a content.php content.php.bck (bewaar kopie van gehackte bestand)
Edit content.php en knip regels 15 t/m 34
15 <footer class="entry-footer">
16 <?php if ( 'post' === get_post_type() ) :
17 ?>
18 <div class="entry-meta">
19 <?php
20 allx__posted_on();
21 allx__posted_by();
22 allx__entry_footer();
23 if( !get_theme_mod( 'hide_posted_view' ) and !is_page_template( 'templeat-page-bilder.php')) {
24 if( !is_single() ) {
25 echo '<span class="news-view"><span class="dashicons dashicons-visibility">
</span> '.__('View ','allx').get_post_meta( get_the_ID(), 'post_views_count', true )."</span>";
26 }
27 else {
28 echo '<span class="news-view"><span class="dashicons dashicons-visibility">
</span> '.__('View ','allx').seos_get_post_view()."</span>";
29 }
30 }
31 ?>
32 </div><!-- .entry-meta -->
33 <?php endif; ?>
34 </footer><!-- .entry-footer -->
En plak deze code vóór de laatste regel 104
84 </div><!-- .entry-content -->
85 <?php endif; ?> 86
87 <footer class="entry-footer">
88 <?php if ( 'post' === get_post_type() ) :
89 ?>
90 <div class="entry-meta">
91 <?php
92 allx__posted_on();
93 allx__posted_by();
94 allx__entry_footer();
95 if( !get_theme_mod( 'hide_posted_view' ) and !is_page_template( 'templeat-page-bilder.php')) {
96 if( !is_single() ) {
97 echo '<span class="news-view"><span class="dashicons dashicons-visibility"></s pan> '.__('View ','allx').get_post_meta( get_the_ID(), 'post_views_count', true )."</span>";
98 }
99 else {
100 echo '<span class="news-view"><span class="dashicons dashicons-visibility"></s pan> '.__('View ','allx').seos_get_post_view()."</span>";
101 }
102 }
103 ?>
104 </div><!-- .entry-meta -->
105 <?php endif; ?>
106 </footer><!-- .entry-footer -->
107
108
109
110 </article><!-- #post-<?php the_ID(); ?> -->
Page break '(meer...)'
Bij het opstellen van een bericht in WP Edit kan de weergave van een bericht ingekort worden.
Door de cursor op de gewenste plaats van afbreken te zetten en daarna de button 'Lees-meer-tag invoegen' aan te klikken, wordt op deze plaats in de tekst de zgn. 'more' tag ingevoegd, een soort van page-break.
Als we de blog nu op de homepagina (multi-view) bekijken zien we dat het bericht stopt op de geselecteerde plaats met een link.
Als we deze link aanklikken opent het bericht (single-view) en wordt ook de rest van het bericht getoond.
Maar dan springt de weergave naar de single-view van het bericht op de plaats waar de tag geplaatst is. Hierdoor verdwijnt het bovenste gedeelte van het bericht, terwijl het veel duidelijker is als de single-view begint aan de top van het bericht.
Om dit te corrigeren plaatsen we een hack aan het einde van het bestand ../themes/allx-premium/functions.php
Note: Zorg dat er eerst een kopie functions.php.org van de originele functions.php gemaakt is!
Voeg voor bovenstaande wensen onderstaande code toe geheel aan het einde van functions.php:
/**
* More tag customizeren
* Ben Makkink 29-11-2016
*
* Stop more link from jumping to middle of page
*/
function remove_more_jump_link($link) {
$offset = strpos($link, '#more-');
if ($offset) {
$end = strpos($link, '"',$offset);
}
if ($end) {
$link = substr_replace($link, '', $offset, $end-$offset);
}
return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');
Page Links boven content
Als in Pagina's een 'page-break' gezet wordt dan wordt op dat punt de pagina onderbroken en worden er aan de bodem 'Page Links' geplaatst. Hier kan de gebruiker kiezen naar een andere pagina('s) te gaan.
Als echter een gebruiker een pagina opent, dan zal hij helemaal naar beneden moeten scrollen om een andere pagina te kunnen selecteren. Daarom heeft het mijn voorkeur dat deze 'Page Links' ook aan de top van de pagina, voor de content, weergegeven worden. Door deze Links aan de top heeft de gebruiker ook meteen een overzicht in hoeveel pagina's de pagina verdeeld is.
Hack niet in parent-theme!
Het weergeven van de 'Page Links' is mogelijk, maar hiervoor is een hack noodzakelijk.
Het bestand wat bewerkt moet worden is content-page.php dat zich bevindt in ../wp-content/themes/allx-premium/template-parts/.
Vóórdat we dit bestand content-page.php bewerken, maken we eerst een backup kopie met de naam 'content-page.php.org', zie hiervoor ook WORDPRESS::Backup and Restore sectie Script Backupwp: User Hacks
Na de hack maken we een backup content-page.php.bck
Content-Page.php
Hieronder het gedeelte van de code waarin we een wijziging aanbrengen. Het gehighlighte gedeelte is nieuw toegevoegd vóór 'the_content()'en is een kopie van de 'wp_link_pages' code na 'the_content()'.
29 <div class="entry-content">
30 <?php
31 wp_link_pages( array(
32 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'allx' ),
33 'after' => '</div>',
34 ) );
35 the_content();
36 wp_link_pages( array(
37 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'allx' ),
38 'after' => '</div>',
39 ) );
40 ?>
41 </div><!-- .entry-content -->
Auto-update werkte niet
Bij Wordpress worden de updates/upgrades automatisch uitgevoerd. In januari 2019 ontving ik een e-mail van Wordpress dat een automatische update niet lukte.
- Toen ik probeerde de update handmatig uit te voeren lukte dat ook niet. De voortgang was als volgt:
Downloading update from http://wordpress.org/wordpress-5.0.3.zip...
gevolgd door:
Download failed.: The checksum of the file () does not match the expected checksum value (xxxxxxxxxxxxxxx).
- Voor verdere analyse heb ik de DEBUG-mode ingeschakeld door een edit in het bestand ../blog/wp-config.php vóór de scriptregel:
/* That's all, stop editing! Happy blogging. */
// Enable WP_DEBUG mode
define( 'WP_DEBUG', true );
// Enable Debug logging to the /wp-content/debug.log file
define( 'WP_DEBUG_LOG', true );
// Disable display of errors and warnings
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );
// Use dev versions of core JS and CSS files (only needed if you are modifying these core files)
define( 'SCRIPT_DEBUG', true );
- In Debug-Mode opnieuw geprobeerd te upgraden. Dit resulteerde in foutmeldingen in het logbestand ../blog/wp-content/debug.log die er allemaal op neer kwamen dat de download /tmp/wordpress-5.0.3.zip niet gevonden wordt (No such file).
Alles wees er op dat de download van de update geen write-access krijgt tot de rootmap /tmp
- De permissies van /tmp waren: drwxrwxrwt. , dus dat zou geen probleem mogen zijn.
- Enige tijd terug had ik het TMP bestand leeggemaakt in de veronderstelling dat hier alleen tijdelijke bestanden staan. Dit is het misverstand die tot het probleem leidde.
Eigen privé TMP voor elke service
Zie ook systemd for Administrators
Service Private /tmp
Het root /tmp bestand is bedoeld als gedeelde ruimte voor alle locale services en gebruikers. Tijdenlang is dit een belangrijke bron van beveiligingsproblemen voor diverse services geweest. Symlink aanvallen en DoS kwetsbaarheden vanwege te raden tijdelijke /tmp bestanden was eenvoudig.
Door het /tmp bestand van een service te isoleren van de rest van de host worden zulke kwetsbaarheden verwaarloosbaar.
Met het inschakelen van zo'n Service-Private /tmp wordt de /tmp map die een service te zien krijgt privé en geisoleerd van de host /tmp map.
Elke service krijgt hierdoor tevens geen toegang meer tot de host (root) /tmp of /tmp mappen van andere services.
De Service Private /tmp wordt bij het opstarten van een service in de root /tmp aangemaakt.
Op de homeserver zijn bijvoorbeeld de volgende Service Private /tmp mappen actief:
drwx------ 3 root root 4096 Jan 12 15:21 systemd-private-0320487853884b1f82e22ffa73d8d58f-arpwatch@enp1s6.service-JpqxhM
drwx------ 3 root root 4096 Jan 12 15:21 systemd-private-0320487853884b1f82e22ffa73d8d58f-clamd.service-12xF6v
drwx------ 3 root root 4096 Jan 12 15:21 systemd-private-0320487853884b1f82e22ffa73d8d58f-httpd.service-O5lnF4
drwx------ 3 root root 4096 Jan 12 15:21 systemd-private-0320487853884b1f82e22ffa73d8d58f-mariadb.service-k5r7XE
drwx------ 3 root root 4096 Jan 12 15:21 systemd-private-0320487853884b1f82e22ffa73d8d58f-system-mariadb.service-J9i0NX
Probleem gevonden en opgelost
Door het verwijderen van alle tijdelijke bestanden in /tmp verwijderde ik effectief het prive /tmp bestand van de diverse services.
Voor de update van Wordpress wordt het update pakket gedownload naar het /tmp bestand, maar die was voor de service httpd niet meer beschikbaar en de download faalde.
Deze Service Private /tmp mappen worden eenvoudig hersteld door de services opnieuw op te starten bijv.: # service httpd restart.
De Service Private /tmp mappen van alle services in 1 keer herstellen
gaat eenvoudiger met een reboot
Migreren van HTTP naar HTTPS
Gemengde inhoud: Afbeeldingen niet beveiligd
Als we ons HTTP domein beveiligen met SSL/TLS versleuteling (HTTPS) resulteert dat bij clientbrowsers in onderstaande vermelding in Firefox. Bij overige browsers volgen soortgelijke vermeldingen.
Zie WORDPRESS::Plugins en Wizards sectie Better-Search-Replace voor switch naar HTTPS voor het omzetten van de absolute HTTP links naar HTTPS links.
© Ben Makkink