Mixed content over https – De ce pagina mea nu e sigura?

Dacă vrei să te pui bine cu google și să ai un ranking mai bun, trebuie să ai instalat un certificat SSL. 

Nu merge și așa, fără certificat?

Merge, dar browserele vor avea mare grijă să afișeze un mesaj prin care anunță vizitatorii că site-ul nu e sigur. 

 

Păi, șite-ul meu are doar niște poze cu ciobănești miortici și niște texte pe care le-am scris când eram mai mult beat? De acord, ciobăneștii pot fi periculoși dar ce nu e sigur la site-ul meu? 

Ei bine, conexiunea nu e securizată! Asta înseamnă că atunci când cineva își scrie numele și parola, aceasta sunt transmise ca atare către serverul care găzduiește site-ul și, teoretic, pot fi interceptate. Pe de altă parte, aceste date sensibile sunt protejate atunci când conexiunea e securizată, pentru că browserul și serverul web comunică prin intermediul unui fel „alfabet secret”, ca să supra-simplificăm lucrurile.

Suna bine, dar site-ul meu nu are interfață cu utilizatorii, nimeni nu trebuie să-mi transmită nicio parolă și niciun fel de date personale. Eu am doar poze cu câini, de ce trebuie să-l securizez?

Pentru că nu costă nimic. Prin intermediul asociației non profit Let’s encrypt, această opțiune este gratuită și peste 200 mil de site-uri o folosesc. În realitate, presupune puțină bătaie de cap dacă te ocupi manual de toată procedură. Eu, din fericire, am folosit un script integrat în cPanel și instalarea certificatului a fost automată.

După ce instalam certificatul e musai sa ne asigurăm că serverul web va redirecționa toate cererile către versiunea securizată a site-ului.  Mai exact, în loc de http://pinzaru.ro va deschide https://pinzaru.ro. Dacă folosim cPanel, iarăși nu e o treabă deloc complicată, după cum putem observa în imaginea de mai jos.

Am instalat certificatul, am redirecționat și pagina mea tot nu e sigură!

Chrome o ține pe-a lui și zice că pur și simplu treaba nu e sigură..

Firefox însă, e puțin mai nuanțat, și zice ca anumite părți din imagine nu sunt sigure. Cum ar fi imaginile???

Unele mixuri nu sunt bune

Iată un scenariu foarte probabil: avem certificatul instalat și valabil (nu e expirat), pagina noastră începe cu https și totuși NU este văzută cu ochi buni de către browsere. Dacă site-ul nostru se bazează pe WordPress, peste care mai avem adăugate vreo 20 de plugin-uri, este posibil să dăm de probleme atunci când unele plugin-uri încearcă să descarce cod de la adrese externe, cum ar fi un script java.

Soluția? Vedem care sunt pluginurile cu probleme, le updatam și daca nu problema nu dispare, le dezactivam. Putem găsi oricând un plugin alternativ.

Unele imagini nu sunt sigure? Sau cum am descoperit eu apa calda…

Mai adesea decât pluginurile buclucașe, problema poate veni de unde te aștepți mai puțin, tocmai de la niște nevinovate de la linkuri către anumite imagini pe care le încarcă tema de WordPress. Fie că unele teme WordPress au „hardcoded” niște link-uri către anumite imagini, fie că am făcut noi cu mâna noastră acest lucru, trebuie să ne învățăm să nu mai punem adrese directe către imagini. În imaginea de mai jos, cu mâna mea, am încărcat mai multe imagini în sidebar.php folosind adresa directă către ele, sub forma de http://pinzaru.ro/wp-content/imagine.jpg. Acest lucru a fost imediat taxat de către browser care tratează pagina drept nesecurizată deoarece conținutul se încarcă via https: dar imaginile sunt descărcate de la adresa cu http.

Cum rezolvăm problema?

Folosim o adresă relativă.

src=”<?php bloginfo(‘template_url’); ?>/images/Ryzen_3900X.jpg”

Adresa de mai sus este înțeleasă de WordPress in următorul fel: afișează fișierul Ryzen_3900X.jpg din folderul „images” de la adresa unde este stocata tema curenta. E fix același lucru cu http://pinzaru.ro/wp-content/tema/images/Ryzen_3900x.jpg – dar face minune când vorbim de pagini sigure și mai ales dacă dorim să portăm site-ul la altă adresa.

 

Cum listam postarile din aceeasi categorie in WordPress

Nu e o idee rea să avem o lista cu postări din aceeași categorie la sfârșitul unui articol. În primul rând cresc șansele că cititorul să vadă un alt articol interesant și să mai rămână pe site pentru un alt articol, sau două… Mai mult de atât, atunci când motoarele de căutare vor indexa articolul cu pricina, va indexa și titlurile care apar la sfârșit, ceea ce poate duce la o combinație de cuvinte cheie care să se potrivească unei căutări specifice. De exemplu dacă articolul este despre „Cum să-mi aleg un procesor pentru jocuri?” iar la sfârșitul lui apare lista „Cum să fac overclocking la placa video?”- atunci când cineva va cauta „overlocking procesor” – este posibil să apară în lista de rezultate primul articol sau al doilea, în funcție de care are un rank mai bun.

Există numeroase plugin-uri care fac acest job, dar dacă vom folosi codul de mai jos, putem lista aceste postări unde vrem noi și nu ne vom limita la un simplu widget. Poate vrem sa le postam în bara din dreapta, poate vrem sa le postam la sfârșitul articolului, poate vrem sa le postam la secțiunea comentarii sau la sfârșitul paginii.

Pentru aceasta va trebui să alegem opțiunea „theme editor” și să introducem codul într-unul din fișierele specifice temei. De exemplu, dacă vrem să apără la secțiunea comentarii, edităm comments.php dacă vrem în bara din dreapta, edităm sidebar.php și așa mai departe. Aceste fișiere diferă de la temă la temă, dar WordPress oferă și informații suplimentare cu privire la funcția pe care o îndeplinesc diferite fișiere .php din temă.

Codul de mai jos trebuie să înceapă cu <div> și să încheie cu </div>

<?php $orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
‘tag__in’ => $tag_ids,
‘post__not_in’ => array($post->ID),
‘posts_per_page’=>5, // Numarul de postari care va fi listat
‘ignore_sticky_posts’=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {

echo ‘<div id=”relatedposts”><h3>Postari similare</h3><ul>’;

while( $my_query->have_posts() ) {
$my_query->the_post(); ?>

<li><div class=”relatedthumb”><a href=”<? the_permalink()?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_post_thumbnail(); ?></a></div>
<div class=”relatedcontent”>
<h3><a href=”<? the_permalink()?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h3>
<?php the_time(‘M j, Y’) ?> //listeaza si data postarii, putem sterge aceasta linie
</div>
</li>
<? }
echo ‘</ul></div>’;
}
}
$post = $orig_post;
wp_reset_query(); ?>