Webprogramozás mindenkinek

Hogy változtasd meg WordPress jelszavad a PHPMyAdmin segítségével

2017. december 15. - GeorgeL

password-pain_3071722b.jpg

 

Bárkivel előfordulhat, hogy elfelejt egy jelszót (ajánlom használd a Lastpass)! Ha történetesen a WordPress oldalad jelszavát felejtetted el szerencsére két opciód is van!

Előszöri is a WordPress beépített jelszó kezelője amit az admin felületen találsz.

lost-password-wp

 

Azonban előfordulhat, hogy ez az út nem járható számodra. Mondjuk nem emlékszel milyen email címet adtál meg esetleg elgépelted. Ebben az esetben sem kell kétségbe esned. Jöhet a második opció.

 

A WordPress jelszavad helyreállítása a PHPMyAdmin segítségével

 

Mivel Worpdress weboldalad van feltételezem tudod, hogy a WordPress adatbázissal működik. Adattáblákban tárolja az összes informácíót, többek között a felhasználóneveket és jelszavakat is. Ezeknek az adatbázisban lévő adattábláknak a szerkesztésére a PHPMyAdmin felület ad segítséget. A PHPMyAdmin-t a legtöbb tárhelyszolgáltató a felhasználók rendelkezésére bocsájtja vagy a CPanelen vagy saját admin felületén keresztül. Ha még nem használtad a PHPMyAdmint tájékozódj a tárhelyszolgáltatódnál, miként érheted el.

Lássuk, hogy tudod megváltoztatni a jelszavad a PHPMyAdmin segítségével

 

1. Nyisd meg a PHPMyAdmint

phpmyadmin_cpanel

 

2. Keresd meg a WordPress weboldalad adatbázisát a balodali panelon és kattints rá.

select_database

 

 3. Miután kiválasztottad az adatbázist a főpanelen, keresd meg a users adattáblát. Amennyiben a WordPress telepítésekor nem változtattad meg az adattáblák prefixét keresd a wp_users. Amennyiben az alapértelmezettől eltérő előtaggal telepítetted a WordPress-t természetesen az egyénielőtag_users adattáblát keresd. Kattints az adattábla melleti Browse linkre.

browse_users_table

 

4. A főpanelen megjelennek a felhasználók. Keresd meg a felhasználói nevedet és kattints az Edit linkre.

edit_user

 

5. ‎Az új jelszó megadásához a user_pass mezőt kell módosítanod. A Function nevű legördūlő menüből válaszd ki az MD5-t majd a mellette lévő szerkesztő ablakba írd be az új jelszvad. Ezutan már csak a Gogombra kell kattintanod, hogy véglegesítsd a változásokat.

change_password

 

Ezzel kész is van!. Mostmár megnyithatod a weboldalad log in felületét és bejelentkezhetsz az új jelszavaddal. Amint bejelentkeztél a WordPress észleli az új, MD5 hash-ban tárolt jelszavadat és titkosítja egy algorutmussal.

A fenti módszert használhatod az online weboldladon és a lokális szervereden is. Amennyiben kiváncsi vagy hogy telepítheted a Wordprest lokálisan olvasd el a Lokális webszerver telepítése – MAMP  bejegyzést.

Ha már készen vagy a weboldaladdal itt van egy kis segítség, miként tudod az online szerverre feltenni WordPress oldal mozgatása lokális szeverről online szerverre

 

Happy coding!

Az 5 legjobb Javascript keretrendszer – framework

javascript-frameworks.png

 

Javascript vezető szerepe a web fejlesztésben megkérdőjelezhetetlen. 2017-ben a tanulásra  legajánlottabb nyelvnek választották. Jelenlegi verziójában, framework-n keresztül, használható mind kliens- és szerver oldali programozására.

A Javascriptre épülő framework-k nélkülönözhetetlenek minden web programozó számára. Segítségükkel jelentős mértékben felgyorsítható a fejlesztés folyamata ezzel lerövidítve a project befejezéséhez szükséges időt.

A Javascript framework használatának előnyei:

  • Hatékonyság: egy project fejlesztése a framework-k megjelenése előtt hónapokat vett igénybe. Több száz, ezer kód sort kellett bevinni. A Javascript framework-k használatával a project fejlesztési ideje a töredékére csökkent a jól strukturált előre beépített mintáknak, funkcióknak köszönhetően.
  • Biztonság: A framework-k mögött álló jelentős tech vállalatok mint a Google, Facebook, valamint a nagy létszámú fejlesztői közösség a biztosítéka arra, hogy a framework megfeleljen napjaink biztonsági elvárásainak
  • Költség: Mivel a top framework-k ingyenesek, és nem mellékesen nyílt forráskóduak, jelentősen csökkentheti a web applikációk költségei

Kétségtelen tény, hogy a Javascript és a ráépülő framework-ök folyamatosan fejlődnek, ezért fontos, hogy tudásod mindig naprakész legyen. Elengedhetetlen legalább ismerni és érteni a legelterjedtebb framewok-t. A ValueCoders 300+ fejlesztő megkérdezésével végzett felmérés alapján 2017-ben a következő framework-k a legszélesebb körben használtak:

 

AngularJS 2.0 & 1.x

 angular-logo-1024x576.jpg

A nagyon várt AgularJS 2 hivatalos megjelenése után a framework népszerűsége új szintre lépett. Ennek ellenére kockázatos döntés lehet az új verzióra váltani ha nem vagy biztos magadban. Az AngularJS 2, ellentétben AngularJS 1-el teljesen Typescript-ben íródott és megfelel az ECMAScript 6 specifikációinak.

Itt egy flowchart ami adhat némi kapaszkodót:

 

flowchart1.png

 

Előnyei:

  • Gyors fejlesztés
  • Könnyű tesztelhetőség
  • Könnyű kód integráció
  • Két irányú adat szinkronizálás
  • Olyan népszerű fejlesztői interfészek támogatják mint az InteliJ IDEA, Visual Studio
  • Fejlesztése mögött a Google áll

Az AngularJS közvetlenül a DOM-ot (Document Object Model) módosítja így bármilyen változtatás a forrás kódban azonnal látható a felhasználói felületen (User Interface). Ezt hívják szaknyelven two-way data binding-nak.

Jelenleg a legtöbbet használt Javascript framework SPA (Single-Page Applications) fejlesztésére és nem mellékesen az AngularJS-nek van a legnagyobb fejlesztői közössége.

 

ReactJS

 react-logo-1024x538.png

Napjaink egyik, ha nem a legnépszerűbb és leggyorsabban növekvő nyílt forráskódu framework-e a Facebook gyámsága alatt álló ReactJS. Több mint 1000 programozó működik közre a fejlesztésében a GitHub-n. A ReactJS áll a Facebook és az Instagram oldalai mögött is.

 

flowchart2.png

 

A ReactJS Virtuális DOM-t használ ami jelentős teljesítménynövekedést eredményez az AngulrJS-l összehasonlítva. A Virtual DOM nem mást csinál, mint új rétegként beékelődik a kód és a DOM közé, egybe gyűjti a DOM-n végzett műveleteket, és optimálisabban batchenként hajtja végre azokat, a változásokra figyelve.

A ReactJS lehetőséget biztosít a fejlesztők számára dinamikus, nagy forgalmú web applikációk készítésére.

 

Meteor.js


meteor-js-logo.png

A Javascript általánosan használt nyelv a böngészők kliens oldali programozására. Használata a szerver oldali programozásra a MeteorJS alap gondolata. Lehetőséget ad a front-end fejlesztők számára a szerver oldali programozásra más szerver oldali nyelv, Ruby/PHP/Java használata nélkül. Kiválóan használható adat bázis alapú web applikációk készítésére.

 

Előnyei:

  • Kliens oldali megjelenítés (front-end)
  • Szerver oldali programozás (back-end)
  • Adat bázis kezelés

 

flowchart3.png

 

Mivel a MeteorJS valós idejű adat bázist használ a felhasználónak nem kell az applikációt, web oldalt frissítenie a változás megtekintéséhez mivel az adat bázisban bekövetkezett változások azonnal láthatóak a felhasználói felületen (User Interface) és ezzel csökkenhet, ellentétben a különböző szerver oldali nyelvekkel, a kiszolgáló válasz ideje okozott idő veszteség.

 

EmberJS

 ember-js-logo-1024x451.png

Az EmberJS egy nyíltforráskódú Javascript framework melynek segítségével web applikációkat készíthetsz gyorsan, egyszerűen. EmberJS-t használ többek között a LinkedIn, Groupon. Habár elsődlegesen különböző szolgáltatásokban gazdag web applikációk fejlesztésére használják, lehetőség van asztali gépekre szánt applikációk készítésére. Ilyen például az Apple Music.

 

Az EmberJS két oldalú adat szinkronizálást és Virtuális DOM-t használ ép úgy mint az AngularJS.Nagyszámú fejlesztői közösség támogatását élvezi.

Olyan nagy cégek alkalmazzák többek között web oldalaikon mint a LinkedIn, Netflix, Kickstarter.

 

Vue.js

 vuejs-logo-1024x502.jpg

VueJS egy progressive framework, felhasználói felületek építésére. Sok esetben képes az AngularJS helyettesítésére. Two way data binding-t és Virtuális DOM-t használ. A VueJS úgynevezett lightweight framework, könnyen integrálható projectekbe. Segítségével egyszerűen építhetsz progresive web applikációkat (PWA).

 

Előnyei:

  • Két írányú adat szinkronizálás (mint az AngularJS, EmberJS)
  • Szerver oldali rendering (A kiszolgálóoldali renderelés leggyakoribb felhasználási módja a kezdeti megjelenítés kezelése. Amikor a felhasználó először kéri appunkat a kiszolgáló szerver egy HTML karakterláncba teszi a kért komponenseket, majd válaszként elküldi az ügyfélnek)
  • JSX támogatás
  • Az egyik leggyorsabb framework

 

Összegezve

 

Javascript a web fejlesztés jelene és jövője. Kiválasztani a legmegfelelőbb framework-t nem könnyű. Az elsődleges szempont mindig az legyen, hogy a framework álltal kínált funkciók minnél jobban igazodjanak, megfeleljenek a project követelményeinek.

Az alábbi összehasonlító táblázat adhat némi kapaszkodót:

 

js-frameworks-comparsion.png

Forrás: DA-14

 

Happy coding!

SSL tanúsítvány – röviden

ssl_browser-1.png

 

Mit jelent az SSL tanusítvány?

Angolul, az SSL rövidítés jelentése Secured Sockets Layer. Röviden, az SSL egy olyan tanusívány, ami arra szólgál, hogy az információt tároló kiszolgáló-server és a honlapot látogató felhasználó böngészóje közötti kapcsolatot titkosítsa így illetéktelenek nem tudnak ebbe belelátn. Meglétét egy weblapra kívülről ránézve úgy látod, hogy Amennyiben egy weboldal SSL tanúsítvánnyal rendelkezik a linkje https-sel kezdődik sima http helyett, valamint egy kis zöld lakat és a “Biztonságos” szó is látszik a böngésző címsorában.

 
capture.PNG
Ez a titkosított kapcsolat lehetőséget ad a személyes adatokhoz való biztonságos hozzáféréshez anélkül, hogy ez harmadik személy tudomására jusson. Az SSL technológiát honlapok milliói alkalmazzák, ezzel biztosítva vásárlóik pénzügyi tranzakcióinak védelmét. Fontos tulajdonsága a tanúsítványnak, hogy – mivel a tanúsítvány magánkulcsa csak a szerveren, egy példányban található meg -, a felhasználó számára egyértelműen azonosítja az adott szervert, így a felhasználó biztos lehet abban, hogy nem térítették el az adatforgalmát más szerver felé.
ssl2-1.jpg

De mi van akkor ha az én oldalamon nincs semmilyen pénzügyi szolgáltatás, nem kérem el a látogatók adatait? Szükségem van ebben az esetben az SSL tanúsítványra? Nos, a válasz igen. Na nem kell mindjárt rohannod de ha hosszútávon gondolkozol mindenképpen szükséged van rá. Ugyan is a  Google kijelentette 2016-ban, hogy fokozatosan bevezetik, hogy a https-es oldalakat előnyben részesítik a keresőben! Ez pedig azt jelenti üzleti szempontból, hogy az oldalad ha nem rendelkezik SSL tanúsítvánnyal SEO szempontjából hátrányba kerül a keresőkben. Mondjuk oldald csak a kereső 3-4 oldalán jelenik meg. Odáig pedig csak kevesen lapoznak el. Azért ne ijedj meg! Ez nem megyik napról a másikra fog bekövetkezni! De, tudnod kell róla és jobb ha előbb teszed meg a szükséges lépéseket mint később.

A legtöbb tárhelyszolgáltató manapság már kínálja ezt a szolgáltatást. Vannak ingyenes de vannak fizetős változatai is. 

A legszélesebb körben (tárhelytől függetlenül) elérhető ingyenes SSL szolgáltatás a Let’s Encrypt. A többek közt a Mozilla, a Chrome, a Facebook és az Electronic Frontier Foundation által finanszírozott ingyenes szolgáltatás már 2015 decembere óta létezik. Az egyetlen kikötés, hogy a Let’s Encrypt segítségével beszerzett Domain Validation (DV) tanúsítványokat 90 naponta meg kell újítani, azonban ez akár teljesen automatizáltan is elvégeztethető a szolgáltatás linuxos kliensprogramjával. (forrás: PC World)

Az SSL tanusítvány előnyei

  • Biztos és titkosított kapcsolatot biztosít.

  • Védi a személyes adatokat az esetleges támadás ellen. Egy ilyen támadást akkor indíthatnak például, amikor az Ön weboldala hitelkártya-sorszámokat tartalmaz.

 

Happy coding!

A weboldal autómatikus frissítése a Javascript setInterval() és visszaszámláló használatával

javascript-1.jpg

A JavaScript setInterval() metódus segítségével hívhatsz egy függvényt vagy végrehajthatsz egy általad megadott kódot, meghatározott időközönként. Ebben a bejegyzésben mutatok két egyszerű példát arra, hogyan tudod frissíteni vagy újratölteni a weboldalt minden 10. másodpercben a JavaScript setInterval()használatával és hogy tudod megállítani a frissítést a clearInterval() segítségével.

A setInterval() metódusának szintaxisa

Window.setInterval(code, delay)

  • code reprezentálja a futtatni kívánt függvényt vagy egyéb kódot
  • delay határozza meg mennyi késleltetés legyen a code futtatása előtt, ezredmásodpercben megadva

setInterval() mindaddig hívja a függvényt (code), amíg a clearInterval() meghívásra nem kerül, vagy az ablak be nem záródik.

Az alábbi példámban egy függvényt hívunk meg (egy felhasználó által definiált függvényt) ami 10 másodpercenként újratölti az oldalt.

 

A setInterval() használata

 

  1. <script>
  2.  
  3. window.setInterval('refresh()', 10000); // A FÜGGVÉNY HÍVÁSA MINDEN 10000 EZREDMÁSODPERCBEN AZAZ 10 MÁSODPERCBEN.
  4. // AZ OLDAL FRISSÍTÉSE, ÚJRATÖLTÉSE
  5. function refresh() {
  6.    window.location.reload();
  7. }
  8.  
  9. </script>

 

Visszaszámláló készítése az oldal frissítéséhez

 

Készítsünk egy visszaszámlálót a setInterval() metódus használatával, amely mutatja a hátralévő másodperceket az oldal automatikusan újratöltődéséig.

A példa kód minden másodpercben frissíti a <span> elemet amely megjeleníti a hátralevő másodperceket.

A HTML kód 

  • <!DOCTYPE html>
  • <html>
  • <body>
  • <h2>Az oldal újra töltődik <span id="display_counter" style="color:blue;">10</span> másodperc múlva</h2>
  • </body>
  • </html>
  • A Javascript kód

    1. <script>
    2. var counter = 10;// VISSZASZÁMLÁLÓvar count_down = window.setInterval(function () {
    3. counter--;
    4. if (counter >= 0) {
    5. var span;
    6. span = document.getElementById("display_counter");
    7. span.innerHTML = counter;
    8. }
    9. if (counter === 0) {
    10. clearInterval(counter);
    11. }
    12. }, 1000);
    13. var page_refress = window.setInterval('refresh()', 10000);
    14. // AZ OLDAL FRISSÍTÉSE, ÚJRATÖLTÉSE
    15. function refresh() {
    16. window.location.reload();
    17. }
    18. </script>

    A clearInterval() használata

     

    A HTML kód

    Illeszd be a fentebbi HTML-kódba a következő sort a <div> tag alá:

    <button onclick="stopFunction()">Stop timer</button>

    A Javascript kód

    Illeszd be a fentebbi HTML-kódba a következő sort a <script> tagok közé:

    1. function stopFunction() {
    2. console.log("button pressed");
    3. clearInterval(count_down);
    4. clearInterval(page_refress);
    5. }

     

     Végezetül

     

    A JavaScript setInterval() különböző célokra használható. Fentebb csak két egyszerű példát mutattam be arra vonatkozóan, hogyan lehet automatikusan és többször végrehajtani.

    Ne feledd, a setInterval() mindaddig futni fog amíg meg nem hívod a clearInterval() függvényt!

    És itt a teljes forrás kód …

    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    4. <h2>Az oldal újra töltődik <span id="display_counter" style="color:blue;">10</span> másodperc
    5. múlva</h2>
    6. <button onclick="stopFunction()">Stop timer</button>
    7.  
    8. <script>
    9. var counter = 10;
    10. // VISSZASZÁMLÁLÓ
    11. var count_down = window.setInterval(function () {
    12. counter--;
    13. if (counter >= 0) {
    14. var span;
    15. span = document.getElementById("display_counter");
    16. span.innerHTML = counter;
    17. }
    18. if (counter === 0) {
    19. clearInterval(counter);
    20. }
    21. }, 1000);
    22. var page_refress = window.setInterval('refresh()', 10000);
    23. // AZ OLDAL FRISSÍTÉSE, ÚJRATÖLTÉSE
    24. function refresh() {
    25. window.location.reload()
    26. ;}
    27. function stopFunction() {
    28. clearInterval(count_down);
    29. clearInterval(page_refress);
    30. }
    31. </script>
    32. </body>
    33. </html>

    Happy coding!

    All in one WP Security and Firewall - A legjobb ingyenes biztonsági WordPress plugin

    all-in-one-wp-security.png

    All in one WP Security and Firewall - Biztonsági plugin Wordpresshez

     

    Azt hiszem nem kell hangsúlyozni, hogy milyen fontos a weboldalunk biztonsága. Sok sok időt és energiát fektetünk bele nap mint nap, hogy úgy nézzen ki, úgy működjön ahogy azt megálmodtuk. Mintha a gyermekünk lenne! És az embernek semmi sem fáj jobban mintha a gyermekét bántják! Márpedig a csúnya, gonosz hacker bácsik ott portyáznak a hálón és keresik, kutatják a könnyű prédát.

    Éppen ezért mindenképpen meg kell tennünk legalább az alapvető biztonsági intézkedéseket a weboldalunk védelme érdekében. Mint Wordpress felhasználók abban a szerencsés helyzetben vagyunk, hogy számos biztonsági plugin áll a rendelkezésünkre, akár ingyen is! Ezek közé tartozik az egyik legnépszerűbb Wordpress biztonsági plugin az All in One Security and Firewall.

    A plugin fejlesztői: Tips and Tricks HQ, WPSolutions, Peter Petreski, Ruhul Amin, MBRSolution, és Chesio. A több mint 600 ezres letöltéssel és a 4.8/5 átlaggal ez az egyik legnépszerűbb biztonsági plugin Wordpress-hez.

    Jellemzők:

    • Erős jelszavak generálása
    • Ha a látogatóid admin felhasználónévvel próbálnak regisztrálni a plugin észleli az ilyen felhasználói nevet és azonnal megváltoztatja azokat
    • Kiszűri a gyanús felhasználóneveket amiket esetleges támadásra használhatnak
    • Rögzíti az összes felhasználói fiók felhasználónevét, IP-címét, bejelentkezési dátumát / időpontját és kijelentkezési dátumát / időpontját
    • Captcha-t rendelhetsz a WordPress bejelentkezési űrlapjához, a WordPress komment űrlapjának elfelejtett jelszavához.
    • Ha egy felhasználó érvénytelen felhasználónévvel próbál bejelentkezni, a plugin automatikusan bezárja a felhasználó IP-címét
    • Automatikus biztonsági másolatok készítésének ütemezése
    • Felügyeli a PHP kód biztonságát
    • Blokkolja a hamis Google botokat a weboldal feltérképezésében
    • Naplózza az összes 404 eseményt a weboldaladon
    • Brute force bejelentkezési támadások blokkolása
    • A legnépszerűbb WordPress pluginekkel minden gond nélkül együtt működik

     

    All in one WP Security telepítése 2 lépésben

     

    1. Lépj a Wordpress oldalad admin felületére. Menj a Plugins -> New plugin. A keresőbe írd be All in One WP Security & Firewall.

    all-in-one-wp-security-wordpress-plugin-setup1.png

    1. Kattints az Install Now majd a telepítés befejezése után az Activate gombra. Az aktiválás után meg fog jelenni a WP Security ikon az admin felület baloldali menüjében.

    all-in-one-wp-security-wordpress-plugin-setup39.png

    A telepítés és aktiválás után végezzük el a szükséges alapvető beállításokat.

     

    All in One WP Security and Firewall

    Dashboard - Vezérlő pult

    Telepítés utánn a Dashboardon rögtön ellenőrízheted a web oldalad jelenlegi biztonsági szintjét.

    security-points-score-system.png

    A beállítások elvégzése után feltétlenül nézd meg mennyit javult a Wordpress web oldalad biztonsága.

     

    Critical Security Feature Status Notification - Kritikus biztonsági beállítások állapota

    critical-security-feature-status.jpg

    Megmutatja a legfontosabb biztonsági beállítások jelenlegi állapotát. Valamint lehetővé teszi aktiválásukat.

     

    Az All in One WP Security beállítása

    Mielőtt bármilyen módosítást végeznél, követve a legjobb gyakorlatot, készíts biztonsági másolatot az adatbázisodról, .htaccess és a wp-config.php-rol.

    all-in-one-wp-security-wordpress-plugin-setup2.png

    Amennyiben a biztonsági beállítások után bármilyen rendellenes működést, nem kívánatos eseményt tapasztalsz, könnyen kikapcsolhatsz minden módosítást valamint a tűzfalat is. Ehhez csak kattints a Disable All Security Features és a Disable All Firewall Rules gombokra.

     

    all-in-one-wp-security-wordpress-plugin-setup3.png

    És most vegyük sorba a beállítási lehetőségeket illetve, hogy melyek azok az alapvető funkciók amiket érdemes bekapcsolni.

     

    User Accounts - Felhasználói fiókok

    Change Admin Username - Az Admin felhasználónév megváltoztatása

    Meglepő, de az egyik leggyakrabban használt username az Admin. Feltehetőleg kevesen változtatják meg, illetve nem is tudják, hogy megváltoztathatják és mivel ez az alapból beállított username ez kerül elmentésre az adatbázisban a Wordpress telepítésekor. Sajnos ez remek támadási felületet biztosít a rosszindulatú hackerek számára. Erősen ajánlott tehát az Admin, mint username használatának tiltása. Itt kapsz figyelmeztetést ha esetleg még nem változtattad meg a username-det.

     

    all-in-one-wp-security-wordpress-plugin-setup5.png

    Mindenképpen érdemes beállítanod az úgynevezett display name-t. Ha nem adtál meg külön display nevet a login neved fog megjelenni minden új bejegyzésed alatt és  hozzászólásodnál, ami biztonsági szempontból nem jó gyakorlat.

     

    all-in-one-wp-security-wordpress-plugin-setup6.png

    A következő tab-on ellenőrízheted milyen erős a jelszavad. Mondanom sem kell minél erősebb annál jobb! Amennyiben jelenlegi jelszavad nem elég erős mindenképpen változtasd meg!

    all-in-one-wp-security-wordpress-plugin-setup7_1.png

     

    User Login - Bejelentkezés


    A User Login alatt a következőket tudod beállítani:
     

    • Enable Login Lockdown - Lehetőséget ad az alább beállított felhasználók kizárására
    • Allow Unlock Request - Engedélyezi, hogy a kizárt felhasználó kérvényezhesse az oldalra való bejelenkezés tiltásának feloldását
    • Max Login Attempts - A maximális probálkozás a bejelentkezésre mielőtt a felhasználó az IP címe alapján letiltásra kerül
    • Login Retry Time Period - Megadhatod, hogy a sikertelen bejelentkezések után a  felhasználó mennyi perc elteltével próbálkozhat újra a bejelentkezéssel
    • Time length of Lockout - Ez a beállítás mutatja, hogy hány percre zárja ki a rendszer a felhasználót
    • Display Generic Error Message - Ha bekapcsolod, hiba üzenetet mutat az érvénytelen bejelentkezés után
    • Instantly Lockout Invalid Usernames - Bekapcsolásakor a rendszerben nem regisztrált felhasználó névvel, bejelentkezni próbáló user azonnali kizárása
    • Instantly Lockout Specific Usernames - Ebben az ablakban adhatsz meg olyan felhasználóneveket amelyeket tiltani akarsz az oldaladon. Pl. obszcén tartalmúakat
    • Notify By Email - A lentebb megadott email címre értesítést kapsz ha egy felhasználót kizár a rendszer

     

    all-in-one-wp-security-wordpress-plugin-setup8.png

     

    Force logout - Kényszerített kiléptetés

    all-in-one-wp-security-wordpress-plugin-setup9.png

     

    • Enable Force WP user Logout - Felhasználó automatikus kijelentkeztetésének engedélyezése
    • Logout the WP user After XX Minutes - Mennyi perc múlva jelentkeztesse ki automatikusan a felhasználót

    Force logout, vagyis ha ezt engedélyezed a percben megadott idő letelte után a felhasználónak újra be kell jelentkeznie. Így biztos lehetsz benne, hogy ha bejelentkezve is maradtál az adminfelületedre, egy olyan eszközön amit nem csak te használsz, suliban, munkahelyen, stb., a beállított idő leteltével kiléptet az oldal.

     

    User Registration - Felhasználó regisztráció

    Manual Approval - Személyes jóváhagyás

    all-in-one-wp-security-wordpress-plugin-setup10.png

     

    Enable manual approval of new registrations - A regisztráció kézi jóváhagyásának engedélyezése

    Bekapcsolva nem engedélyezi a közvetlen regisztrációt az oldaladra a felhasználónak. A felhasználó regisztrációját neked, az adminnak, kell jóváhagyni minden felhasználó esetében.

    Registration Captcha - Regisztráció ellenőrzése Captcha-val

    all-in-one-wp-security-wordpress-plugin-setup11.png

     

    A Captcha tulajdon képen egy teszt aminek segítségével meglehet  állapítani, hogy a regisztráló felhasználó egy személy vagy egy automatizált program, internetes bot. Képekeket kell megjelölni amelyeken egy bizonyos objektum szerepel vagy képen mutatott szám- illetve betüsort kell begépelni.

     

    Database Security - Adatbázis biztonság

    DB Prefix - Adatbázis tábláinak előtagja

    all-in-one-wp-security-wordpress-plugin-setup12.png

     

    • Current DB Table Prefix - A jelenlegi előtagja a táblázatoknak
    • Generate New DB Table Prefix - Automatikus előtag generálása
    • Choose your Own prefix - Saját egyedi előtag megadása

     

    A Wordpress telepítésekor az adatbázis tábláinak előtagját (prefix) automatikusan wp_-re állítja. Ez biztonsági szempontból sebezhetőségre ad lehetőséget, így érdemes megváltoztatni őket. Generálhatsz véletlen szerű előtagot illetve megadhatsz egy általad választottat is.

     

    DB backup - Adatbázis biztonsági mentése

    all-in-one-wp-security-wordpress-plugin-setup13.png

     

    • Enable Automated Scheduled Backups - Automatikus biztonsági mentés engedélyezése
    • Backup Time Interval - Milyen időközönként készüljön mentés
    • Number of Backup Files To Keep - Mennyi biztonsági mentést tartson meg az előző mentések közül
    • Send Backup File Via Email - Az elkészült biztonsági mentés elküldése a megadott email címre

     

    Filesystem Security - Fájl rendszer biztonság

    File Permissions - Fájl hozzáférési engedélyek

    all-in-one-wp-security-wordpress-plugin-setup14.png

     

    Minden fájlnak és könyvtárnak van úgynevezett permission-ja. Ez három szám ami meghatározza a fájlhoz, könyvtárhoz való hozzáférés jogosultsági szintjét.  A Wordpress a fájlokhoz a 664, könyvtárakhoz a 775 és a wp_config.php fájl 660 jogosultsági szintet javasolja. Ettől eltérni csak nagyon indokolt esetben ajánlott.

    Az All In One WP Security ellenőrzi a jelenlegi szinteket és amennyiben nem a Wordpress által javasolt felajánlja a megváltoztatásukat.

     

    PHP File Editing - A php féjlok szerkesztése

    all-in-one-wp-security-wordpress-plugin-setup15.png

     

    • Disable Ability To Edit PHP Files - A PHP fájlok szerkesztésének tiltása
    • Mivel a Wordpress PHP alapú rendszer, támadási felületet nyújt ha engedélyezett a PHP fájlok online szerkesztése. Mindenképpen javasolt a tiltásuk!

     

    WP File Access - Wordpress forrás fájlok hozzáférése

    all-in-one-wp-security-wordpress-plugin-setup16.png

    • Prevent Acces to WP Default Install Files - A Wordpress alapértelmezett telepítő fájljaihoz való hozzáférés tiltása

     

    Host System Logs - Rendszer napló

     

    all-in-one-wp-security-wordpress-plugin-setup37.png

     

    Megnézheted a rendszer naplót az előfordult hibákról, kitiltott felhasználókról, letiltott IP címekről, stb.

     

    WHOIS LOOKUP

     

    all-in-one-wp-security-wordpress-plugin-setup38.png

     

    Információt ad a megadott IP vagy webcímről.

     

    Blacklist Manager - Tiltó lista

     

    all-in-one-wp-security-wordpress-plugin-setup17.png

     

    • Enable IP or User Agent Blacklisting - IP cím és kiszolgáló tiltásának engedélyezése
    • IP címeket és kiszolgálókat tehetsz tiltó listára.

     

    Figyelem!

    Ha a plugin nem rendeltetésszerűen működik az oldaladon kizárhatod magad az admin felületről! Csak nagyon körültekintően használd vagy inkább hagyd kikapcsolva ezt az opciót!

     

    Firewall - Tűzfal

     

    all-in-one-wp-security-wordpress-plugin-setup18.png

     

    Ezek egyszerű tűzfal beállítások. Mindet engedélyezheted.

     

    Additional Firewall Rules - Kiegészítő tűzfal beállítások

     

    all-in-one-wp-security-wordpress-plugin-setup19.png

    all-in-one-wp-security-wordpress-plugin-setup20.png

     

    Itt is engedélyezheted az összes opciót.

     

     

    6G Blacklist Firewall Rules - 6G tűzfal

     

    all-in-one-wp-security-wordpress-plugin-setup21.png

     

    A 6G Firewall egy plusz tűzfal a Wordpress oldaladra. Segít elhárítani a rossz indulatú támadások, ezért engedélyezése mindenképpen javasolt. Itt olvashatsz róla bővebben.

     

    Internet Bots

     

    all-in-one-wp-security-wordpress-plugin-setup22.png

     

    Az Internet Bot-ok olyan apró szoftverek amelyek automatikus feladatokat hajtanak végre az interneten. Információkat szereznek és továbbítanak a szerverek között. Lehetnek hasznosak és veszélyesek is egyaránt. Engedélyezd ezt az opciót a kártékony bot-ok kiszűrésére.

     

    Prevent Hotlinking

     

    all-in-one-wp-security-wordpress-plugin-setup23.png

     

    Prevent Image Hotlink - A hotlink-elés tiltása

    A hotlink közvetlen elérést ad a weboldalad vagy tárhelyed fájljához. Ezzel a módszerrel az oldaladon lévő képeket, videókat más oldalakra illeszthetik be anélkül, hogy bármilyen utalás lenne a forrásra azaz a te weboldaladra.

     

    404 detection - 404 Az oldal nem található

     

    all-in-one-wp-security-wordpress-plugin-setup24.png

    A 404-es vagy Nem található hiba üzenet azt jelzi, hogy a kliens, azaz a látogatód böngészője, kapcsolatba tudott lépni a szerverrel, de a böngésző által kért állomány, azaz a weboldal, nem található.

     

    Brute Force - “Nyers erő” támadás

     

    all-in-one-wp-security-wordpress-plugin-setup25.png

    A Brute Force, “Nyers erő”, támadás lényege, hogy kipróbálja az összes lehetséges kulcsot a helyes felhasználó név - jelszó páros megtalálására. Ez a támadás típus elvileg mindig sikerrel jár. Ám ehhez nagyon komoly technikai háttérre van szükség ami a legtöbb esetben meghaladja egy egyszerű támadó technikai támogatottságát.

     

    Figyelem!

    Ha a plugin nem rendeltetésszerűen működik az oldaladon kizárhatod magad az admin felületről! Csak nagyon körültekintően használd vagy inkább hagyd kikapcsolva ezt az opciót!

     

    Rename login page - A bejelentkező oldal átnevezése

     

    all-in-one-wp-security-wordpress-plugin-setup26.png

     

    Az esetleges támadók így nehezebben vagy esetleg nem is találják meg az admin felületre szolgáló weboldalt.

    Figyelem!

    Ha a plugin nem rendeltetésszerűen működik az oldaladon kizárhatod magad az admin felületről! Csak nagyon körültekintően használd vagy inkább hagyd kikapcsolva ezt az opciót!

     

    Login Captcha - Captcha a bejelentkezésnél

     

    all-in-one-wp-security-wordpress-plugin-setup28.png

     

    A Captcha-ról már ejtettünk pár szót fentebb. Itt engedélyezheted a Captcha-t a bejelenkező és a jelszó emlékeztető oldalán is.

     

    Spam Prevention - Kéretlen üzenetek tiltása

    Comment Spam - Komment spam-ek

    all-in-one-wp-security-wordpress-plugin-setup31.png

     

    Enable Captcha On Comment Forms - Captcha engedélyezése a kommentek hozzáadásánál

    Block Spambots From Posting Comments - Automatikus kéretlen üzenetek tiltása

    Engedélyezheted mind a két opciót.

     

    Comment Spam IP Monitoring - Kéretlen üzenetek IP címének figyelése

     

    all-in-one-wp-security-wordpress-plugin-setup32.png

     

    Letilthatsz olyan IP címeket amelyekről a megadott darabszámú kéretlen üzenet érkezett. Az IP cím teljes kizárásra kerül ezért semmilyen hozzászólás nem engedélyezett számára.

     

    Visitor Lockout - Látogató kizárása

     

    all-in-one-wp-security-wordpress-plugin-setup33.png

     

    Ha bármilyen probléma adódik a weboldaladon aminek kivizsgálása több időt kíván ezzel az opcióval kizárhatod a látogatókat, tulajdonképpen elérhetetlenné teszed az oldalad.

     

    Miscellaneous - Vegyes

    Copy Protection - Másolás védelem

     

    all-in-one-wp-security-wordpress-plugin-setup34.png

     

    Ez az opció nem engedi, hogy a látogató szöveges vagy képi tartalmat másoljon ki az oldaladról.

     

    Frames - Beillesztés tiltása

     

    all-in-one-wp-security-wordpress-plugin-setup35.png

     

    Enable iFrame Protection - A weboldal iFrame-be történő beágyazásának tiltása

    Az iFrame egy HTML tag aminek segítségével teljes weboldalakat lehet beágyazni más weboldalakba. Ennek megakadályozására kapcsold be ezt az opciót.

     

    Users Enumeration - Felhasználó lekövetése

     

    all-in-one-wp-security-wordpress-plugin-setup36.png

     

    Disable Users Enumeration - A felhasználó lekövetésének tiltása

    Letiltja a bejelentkezett felhasználó adatainak megszerzését az url segítségével. Kapcsold be nyugodtan.

     

    Végezetül

     

    Az All in One WP Securyti and Firewall biztonsági plugin Wordpresshez igazán hatékony védelmet képes nyújtani. A rengeteg szolgáltatás, a könnyü beállítás és kezelhetőség mind egy jó érv a használata mellett. Mivel a plugin ingyenes mindenképpen érdemes kipróbálni!

     

    Happy coding!
    GeorgeL - Kód Akadémia

    Részletes elemzés a weboldaladról - Itt a Microsoft Sonar

    sonar.png

     

    Weboldal elemző - Microsoft Sonar

     

    A Microsoft egy új webfejlesztői, webprogramozói segédeszközt tett  elérhetővé. A Sonar alapos elemzésnek veti alá a weboldalakat, és az azokban azonosított esetleges problémák alapján javaslatokat tesz arra, hogy miként is lehetne gyorsabbá, szabványosabbá és biztonságosabbá tenni őket.

     

    sonar-hed-796x398.jpg

     

    Az új elemző eszköz nem statikusan elemzi az oldalakat, hanem ténylegesen be is tölti és végre is hajtja azokat, ami miatt sokkal hatékonyabban tudja azonosítani bennük a különböző problémákat.

    Külön jó hír, hogy egy bővítmény segítségével a Sonar a Visual Studio Code-ba is integrálható. Itt tudod Sonar-t webfelületen elérni.  Mindenképen érdemes kipróbálni!


    Happy coding!
    GeorgeL - Kód Akadémia

    Wordpress oldal mozgatása lokális szeverről online szerverre

    how-to-move-wordpress-from-local-server-to-live-site.jpg

     

    Wordpress oldal fejlesztésének illetve egy meglévő Wordpress oldal át dizájnolásának legjobb, leggyorsabb módja egy lokális szerver használata (olvasd el, hogy tudod az online Wordpress oldalad egy lokális szerverre másolni. A lokális szerverekről WAMP MAMP, pedig itt olvashatsz.).

    Amikor készen vagy a Wordpress oldaladdal és szeretnéd megmutatni a világnak, elérkezett a pillanat, hogy az oldalad elhelyezd a világhálón. Ebben a cikkben ehez szeretnék segítséget nyújtani. Lépésről lépésre elmagyarázni, hogy mi a teendőd.

     

    Mielőtt belekezdünk

     

    Feltétlenül szükséged lesz a következőkre:

    • először is a Wordpress oldalra a lokális szervereden teljes hozzáférésssel
    • egy domain névre és tárhelyre
    • végül egy FTP programra. Ajánlom a Filezilla FTP kliensét.

     

    1. Helyi WordPress adatbázis exportálása

     

    Első lépésként egy másolatot kell készítenünk a helyi lokális adatbázisról. Ehez a phpMyAdmint fogjuk használni.

    Írd be a böngésződbe http://localhost/phpmyadmin/ és válaszd ki az adatbázisod nevét a balodalon felsorolt adatbázisok közül. Ezután kattints az Export feliratra a felső menü sorban.

    phpmyadmin-export-databases.jpg

     

    Az Export menü alatt választhatod a Quick vagy Custom opciót. A Custom opció renget beállítást kínál az exportáláshoz amire az esetek többségében nincs szükségünk, úgyhogy válaszd a Quick opciót és kattints a Go feliratra, az adabázis letöltéséhez.

    export-mysql-database-in-phpmyadmin-1.png

     

    2. WordPress file-ok feltöltése az online szerverre

     

    A második lépésben fel kell töltenünk az összes file-t az online szerverre. Nyisd meg az FTP kliensed és kapcsolódj az online tárhelyedhez. Amikor csatlakoztál a tárhelyedhez győzdj meg róla, hogy a helyes könyvtárat jelölted ki. Amennyiben nem úgynevezett shared hosting szolgáltatásod van másold a file-okat a public_html  könyvtárba. Ha shared hosting szolgáltatásod van keresd meg a domainedhez tartozó könyvtárat vagy hozz létre egyet.

    Jelöld ki a lokális Wordpress file-okat és töltsd fel a tárhelyedre.

    uploadingwordpress_2.png

     

    3. MySQL adatbázis létrehozása

     

    Amíg az FTP kliensed tölti fel a Wordpress file-okat, elkezdheted az adatbázis inportálását az online szerverre. Szolgáltatótol függően használhatsz cPanel-t, amit szinte minden Wordpress tárhelyszolgáltató használ, illetve szolgáltatód használhatja a saját egyedi kontrol panelját. Ami nekünk fontos az a phpMyAdmin. A segítségével hozz létre egy új adatbázist.

    lesson18_img01.png

    Regisztrálj új felhasználónevet és jelszót az adatbázishoz. Engedélyezz teljes hozzáférést (Privilegs) az új felhasználónak.

    25-phpmyadmin-add-user.png

     

    4. Importáld a Wordpress adatbázist

     

    A következő lépés az elmentett lokális adatbázis importálása az on line adatbázisba. Ha bezártad a phpMyAdmin-t nyisd meg újra. Kattints a balodalon az előbb létrehozott adatbázisra. Látni fogod, hogy az adatbázis nem tartalmaz egyetlen táblát sem.

    Kattins az Import-ra a felső menüsorban. Az Import lapon kattints a Choose File feliratú gombra és keresd meg a lementett lokális .sql file-odat. Végül kattints a Go gombra és a phpMyAdmin már el is kezdi importálni a Wordpress adatbázisodat.

    phpmyadmin-import-database.png

     

     

    5. Helyes web URL beállítása

     

    Most az adatbázisban be kell állítanod a weboldalad címét (URL) így létrejön a kapcsolat az adatbázis és a weboldal között. Ugyanis jelenleg az adatbázisban szereplő URL a lokális szervered címét tartalmazza http://localhost.ateoldalad . Ezt kell átállítanod az online oldalad címére, http://www.ateoldalad.hu.

    A phpMyAdmin-ban az adatbázisra kattintva keresd meg wp_options nevü táblát. FIGYELEM! Ha más adatbázis előtagot adtál meg az adatbázis létrehozásakor esetleg a szolgáltatód generálta az adatbázisod keresd az előtag_options táblát.

    Kattints a Browser feliratra a wp_options mellett és a következő lapon látni fogod a wp_options tábla mezőit.

     

    browse-wp-options.jpg

    Keresd meg a siteurl mezőt ami jelenleg a lokális szervered címét tartalmazza. Kattints az Edit ikonra.

    siteurl.png

    Írd át a webcímet (URL) http://localhost.ateoldalad-ről http://www.ateoldalad.hu-re.

    Mentsd el a változtatásokat a Go gombra kattintva.

    edit-siteurl.jpg

    Ismételd meg az előbbit a home mezővel is amit közvetlenül az előbb módosított siteurl mező alatt találsz.

    Mentsd el a home mező változásait azaz kattints a Go gombra.

     

    6. Az online oldal beállítása

     

    Most, hogy importáltad és beállítottad az adatbázist az online szerveren valamint az FTP kliensed is befejezte a feltöltést ideje elvégezni a szükséges beállításokat az online Wordpress oldaladon is. Ha most beírod a webcímedet a keresőbe a következő hibaüzenetet fogod kapni: Error Establishing Database Connection! Ez azért van mert az online Wordpress oldalt nem állítottuk be és az oldal nem éri el az online adatbázist. Hogy korrigáljuk ezt a hibát az FTP kliensed segítségével nyisd meg a wp-config.php file_t és add meg az előzőekben létrehozott adatbázis nevét, a felhasználó nevét és a jelszót az adatbázishoz.

    wp_config.jpg

     

    Jelentkezz be az online Worpress oldalad adminisztrációs felületére és menj a Settings - General oldalra. Ne változtass egyik beállításon sem csak kattints a Save gombra!

    Ezután navigálj a Settings - Permalink oldalra és kattints a  Save Changes gombra, hogy a bejegyzések linkjei, ha vannal, biztosan működjenek.

     

    7. Képek, média file-ok linkjeinek beállítása

     

    Bármikor amikor költözteted Wordpress oldaladat, akár lokális szerverröl online szerverre vagy egyik webcímről a másikra mindíg be kell állítanod a helyes URL-eket a képekhez, média file-okhoz is.

    Egy egyszerű SQL parancsal megoldható a helyes linkek beállítása.

    UPDATE wp_posts SET post_content = REPLACE(post_content, 'localhost/alokalweboldalad/', 'www.ateweboldalad.hu/');
    

    Nyisd meg az SQL lapot a phpMyAdmin-ban és illeszd be a fenti kódot. Ne felejtsd az URL-t a saját webcímeddel behelyettesíteni!

    Kattints a Go gombra a kód futtatásához.

    run-sql.jpg

     

    Kész is van!

    Nefelejtsd el ellenőrizni a teljes weboldalad az oldaladon levö képeket és egyéb médiákat. Ellenőrízd az oldaladon lévő linkek működését is!

     

    Happy coding!
    GeorgeL - Kód Akadémia

    Hogy készíts sitemap.xml-t a Wordpress weboldaladhoz - Webhelytékép egyszerűen

    xml-sitemap_jpg.jpg

     

    A jól megtervezett és kivitelezett SEO (Search Engine Optimization) stratégiák megvalósítása az egyik legfontosabb minden weboldal működéséhez. Ennek a stratégiának szerves részét képezi az weboldal oldalainak indexelése. Az indexelés során a weboldal tartalma láthatóvá és kereshetővé válik a különböző kereső motorokban, Google, Bing, Yahoo, stb.

    A weboldal indexelésének lehetővé tételét, megkönnyítését a sitemap.xml file segíti.

     

    Mi az a sitemap.xml?

     

    A sitemap az weboldal felépítésének, struktúrájának leírása. Gyakorlatilag, mint a neve is mutatja egy térképet jelent a weboldal szerkezetéről ami a keresőrobotok számára előnyös, ez alapján ugyanis könnyedén összeállíthatják az indexelendő oldalak listáját.

    A sitemap használata nem jelent garanciát a jelzett oldalak indexelésére. Előnye abban rejlik, hogy megkönnyíti a botok és spiderek munkáját és hatékonyabbá teszi a weboldal indexelést.

     

    Hogy generálj sitemap.xml-t

     

    A sitemap.xml-t manuálisan is lehetséges létrehozni, csak egy kis XML ismeretre van szüksége hozzá. Azonban ez elég időigényes folyamat abban az esetben ha a website-nak sok sok oldala van. Ehelyett sokkal egyszerűbb az online generátorok, letölthető szoftverek vagy WordPress bővítmények használata a sitemap.xml (webhelytérkép) elkészítéséhez.

     

    Online sitemap generátorok

    Az xml-sitemaps.com egy ingyenes szolgáltatás ahol a következőkre van lehetőséged:

     

    • XML webhelytérkép generálása (sitemap.xml), amelyet regisztrálni tudsz a különböző keresőmotorokba, mint például a Yahoo, a Google és a Bing;
    • Szöveges, txt formátumú, webhelytérképet, amely tartalmazza a website oldalainak URL-címeit;
    • HTML webhelytérképet, amelyet beilleszthetsz az oldalad forrás kódjába és segítségével látogatóid megtekinthetik a weboldalad teljes struktúráját

     

    A xmlsitemapgenerator.org szintén egy ingyenes online sitemap generátor amely lehetőséget ad többek között a következőkre:

    • RSS, HTML and Google XML sitemaps generálás
    • Webhelytérképet generálása 2000 weboldalig
    • A keresőmotorok informálása az oldalak módosításáról és frissítéséről

     

    Wordpress plugin segítségével

    Az alábbiak a legjobb pluginok, amelyek sitemap.xml (webhelytérképek) létrehozására használhatók WordPress-hez:

    • A Google XML Sitemap Generator az egyik legjobb az elérhető pluginok közül. Ingyenesen letölthető és használható. Lehetővé teszi a Google XML, HTML és RSS sitemaps létrehozását. Listázza az összes hozzászólást, címkéket, kategóriákat, oldalakat, archívumokat és szerzőket valamint támogatja az egyéni bejegyzéseket és a taxonómiát. Belehet állítani, hogy automatikusan értesítse a keresőmotorokat a változtatásokról, frissítésekről. Ezt a generátort fogjuk használni a példánkban
    • További népszerű és könnyen használható sitemap generátor pluginek a Yoast SEO, SEO XML Sitemap, Simple WP Sitemaps

     

    Lássuk mi a teendő a Google XML Sitemap Generator bővítmény használatához.

     

    Telepítés

    Jelentkezz be a weboldalad adminisztrációs felületére. A baloldali menüben keresd meg a Plugins -> Add new illetve ha magyar nyelvű akkor Bővítmények ->  Új hozzáadása.

    wp-new-plugin_1.png

     

    A keresőbe írd be Google XML Sitemap Generator és kattints az Install majd a sikeres telepítés után az Activate gombra.

     

    Beállítás

    Kattints a WordPress irányítópultján (adminisztrációs felületén) található Plugins - Bővítmények gombra, majd keresd meg az előbb telepített bővítményt (Google XML Sitemap Generator) és kattints a Settings - Beállítások-ra.

    wp-plugin-google-xml-settings-1.jpg

     

    A General settings alatt állítható be

    • A weboldalon történt változások, frissítések automatikus küldése a keresőmotoroknak
    • A legfrissebb oldalak, bejegyzések automatikus hozzáadása a RSS hírcsatornához
    • A sitemap linkjeinek a robot.txt-be való beillesztése
    • Statisztikai adatok továbbítása a fejlesztőknek
    • És egy kis szívesség a plugin alkotóinak (egy apró bejegyzést illeszt a footer-be).

     

    Nyugodtan hagyhatsz minden opciót bekapcsolva. Ha bekapcsolva hagyod az utolsó két opciót, természetesen egyáltalán nem változtatja meg sem a web oldalad kinézetét sem a működését! Ám amennyiben mégsem szeretnél statisztikai adatokat küldeni vagy megengedni, hogy a forráskódodba írjanak nyugodtan kapcsold ki az utolsó két opciót. Nem foglya befolyásolni a plugin működését.

    wp-google-xml-1.jpg

     

    A Sitemap default panel beállítási lehetőségei

    • Exclude - A sitemap tartalmazza e az adott oldalakat, bejegyzéseket Exclude - Include
    • Relative priority - fontossági sorrend beállítása
    • Update frequency - milyen gyakorisággal frissítse a sitemap-ot automatikusan

    wp-google-xml-settings-2-1.jpg

     

    A képernyő jobb oldalán található Sitemap Related URLs panelen láthatod és ellenőrizheted a létrehozott fájlokat. Úgy mint,  XML Sitemap, RSS Sitemap, New Pages, RSS Robots.txt. Ne felejtsd elmenteni a változtatásokat az oldal alján a Save changes gombbal, miután elkészültél a beállításokkal.

    w-google-xml-setting-3-1.jpg

     

    Összegzés

     

    A sitemap (webhelytérkép) generálásának előnyei vitathatatlanok. Az automatizálás pedig jelentősen leegyszerűsíti a folyamatot. Az egyik legfontosabb előny az, hogy segítünk a keresőmotoroknak könnyen indexelni az oldalakat, ami magasabb rangsorolásához vezet vagyis a weboldalad előrébb kerül a keresők találati listáján.

     

    Happy coding!
    GeorgeL - Kód Akadémia

    Google Analytics-t hozzáadása Wordpress-hez

    google-universal-analytics1.jpg

     

    Ha mérni szeretnéd web oldalad forgalmát, akkor nehezen találsz jobb megoldást mint a Google Analytics. Rengeteg információt szolgáltat a látogatóidról és arról, hogy mit csinálnak, miként viselkednek a weboldaladon.


    Ebben a bejegyzésben megmutatom, miért kell a Google Analytics szolgáltatást használni (nem csak) a WordPress weboldaladon, és megmutatom, hogyan lehet hozzáadni az oldal forráskódjához. Remélhetőleg mire a bejegyzés végére érsz, már neked is sikerült beillesztened a Google Analytics-t az oldalad kódjába.

     

    Miért használd a Google Analytics-t?

     

    Weboldal tulajdonosként valószínűleg sokat törted a fejed azon, hogy a várva várt látogató hogyan találja meg a te weboldalad, mit csinál az oldaladon, miután rád talált, és hogyan segítheted őt abban, hogy a lehető legtöbb időt töltse el ott. Ezekre a kérdésekre a Google Analytics megadja neked a választ!

    A Google Analytics egy hatékony elemzési eszköz, amely segít megérteni, hogy teljesít és milyen hatékony a web oldalad. Információkat nyújt, amelyek potenciálisan segítenek neked maximalizálni az online marketing erőfeszítéseit és növelni a konverziós arányokat. Ha még mindig nem vagy meggyőződve, itt van még néhány kényszerítő ok a Google Analytics használatának megkezdéséhez:

     

    Hozz megalapozott döntéseket

    A Google Analytics segítségével nyomon követheted a forgalmi és a felhasználói viselkedési adatok minden formáját, amelyek segítségével optimalizálhatod web oldalad kialakítását, tartalmát és funkcióit.


    Készíts testreszabható jelentéseket

    A Google Analytics 5 különböző jelentéstípussal rendelkezik, közvetlenül a dobozból. Ezenkívül beállíthatod saját egyéni jelentéseid a drag and drop felület használatával.

    Valós idejű adatok

    A Google Analytics valós idejű jelentései lehetővé teszik, hogy valós időben lásd a látogatókat a weboldaladon. Nem lenne fantasztikus látni, hogy hány látogató aktív a weboldaladon?


    Most, hogy tisztában vagy azzal, hogy mi a Google Analytics, és miért érdemes ezt a webes szolgáltatást használni, nézzük meg, hogyan telepítheted azt a WordPress weboldaladra.

     

    A Google Analytics telepítése Wordpress alá


    Ebben a részben megtanulod a Google Analytics-t hozzáadni a weboldaladhoz és elkezdheted nyomon követni az oldalad forgalmát.

     

    1. Lépés: Google Analytics fiók készítése

    Először is szükséged lesz egy Google Analytics-fiókra. Ha már rendelkezel bármilyen Google-fiókkal, amelyet más Google-szolgáltatásokhoz (például a Gmailhez vagy a YouTube-hoz) használsz, akkor használhatod azt a Google Analytics fiók létrehozásához Amennyiben nem rendelkezel még semmilyen Google fiókkal, úgy előbb készítened kell egyet , mielőtt tovább lépsz.

     Nyisd meg kedvenc böngésződet és menj a Google Analytics kezdőlapjára, majd kattints a Bejelentkezés> Analytics elemre

     Miután bejelentkeztél a Google-fiókoddal, feliratkozhatsz a Google Analytics szolgáltatásra kattintva a Sign up/Regisztráció gombra kattintva.

    1-1.PNG

    Ezután megkel adnod az új fiókkal kapcsolatos adatokat. Vegyük át a szükséges beviteli mezőket egyenként.

    Először is legfelül ki kell választanod, hogy mit szeretnél nyomon követeni. A mi esetünkben természetesen a Website-t kell választani mivel a weboldalunk alá szeretnénk a Google Analytics-t telepíteni.

    • Add meg a fiók nevét. Ide beírhatod a weboldalad nevét is az egyszerűség kedvéért.
    • Add meg a weboldalad nevét és webcímét (URL) pl.: ateoldalad.hu
    • Válaszd ki az oldalad kategóriáját és állítsd be az időzónát. 
    • Hagy minden opciót kipipálva és kattints a Get Tracking ID gombra

    3-2.png

    Megjelenik egy felugró ablak a képernyőn, amely felkér, hogy fogad el a Google Analytics Általános Szerződési Feltételeit. A folytatáshoz kattints az Accept/Elfogadom gombra.

    4-terms-of-service.png

    Ezután létrejön a Google Analytics-fiókod. Mindössze annyit kell tenned, hogy összekapcsolod a WordPress weboldaladdal, és elkezdheted nyomon követni a forgalmi mutatóit. Ehhez szüksége lesz a követési azonosítódra és webhely követési kódjára.

    6-tracking-info.png

    A következő képernyőn keresd meg a követési azonosítót és a JavaScript kódot a weboldal követése rész alatt. Be illesztheted egy szöveges fájlba vagy csak hagyd nyitva a böngésző ablakában. A lényeg, hogy könnyen hozzáférjél.



    2. Lépés: A GA kód és az anozosító beillesztése a Wordpress kódba

    Most, miután regisztráltál a Google Analytics szolgáltatásra, és megvan a követési azonosító és a szükséges Javascript kód, itt az ideje beilleszteni a weboldaladba.
    A követőkódot a weboldal minden olyan lapjához hozzá kell adni, amelyet követni szeretnél.

     A jó hír azonban az, hogy a WordPress szerkezetéből adódóan, egyszerűen hozzá tudod adni minden lap fejlécéhez a kódot, ugyanis elég a header.php file-t módosítanod ami ezután automatikusan alkalmazza a website összes oldalára.


    Két módon teheted ezt - egy plugin használatával és manuálisan. A kézzel történő módosítás annyira egyszerű, hogy nem érdemes időt pazarolni a plugin-nal való beillesztésre. Ha mégis megpróbálkoznál itt egy plugin hozzá. (ha nem boldogultok vele, írjatok nyugodtan)



    A Google Analytics hozzáadása manuálisan



    Jelentkezzen be WordPress oldalad adminisztrációs felületére, és navigáljon a Megjelenés => Szerkesztő. Az oldal jobb oldalán rengeteg fájl fog megjelenni a Templates / Sablonok részben. Keresd meg Theme Header (header.php) fájlt, és nyisd meg a szerkesztőablakban.
    Keresd meg a </ head> címkét, és illeszd be közvetlenül a Google Analytics követőkódját. Valahogy így fog kinézni:

    header-php_1_-2_1.png

    A változtatások mentéséhez kattints a Fájl frissítése gombra.

     

    Ennyi! Most már használhatod a Google Analytis-t

     

    Most, hogy a WordPress web oldalad összekapcsoltad Google Analytics-fiókoddal, a forgalmi adatok megtekintéséhez csak nyisd meg böngésződben a Google Analytics admin felületét. Ha szeretnéd az adatokat a Wordpress admin felületén keresztül elérni próbáld ki ezt a plugin-t. A több mint 1 millió letöltés magáért beszél!

     

    Fontos! A Google Analytics-nek legalább 24 órára van szüksége (attól a naptól kezdve, amikor hozzáadod a kódot a weboldaladhoz) az adatgyűjtésre. Javasolom, hogy néhány nap múlva ellenőrizd az elemzési jelentéseket.



    Happy coding!
    GeorgeL - Kód Akadémia

    A sütikről (cookies) dióhéjban

    browser-cookie-works-1.png

     

    Legtöbbünk már rutin szerűen kattint a felugró "Értem", "Rendben", "Elfogadom" gombokra. Sokszor anélkül, hogy tudnánk mire is adjuk az áldásunk. Nézzük meg, hogy a sütik esetében miről van szó!

     

    Mik azok a sütik?

     

    A sütik, vagy idegen megnevezéssel cookie-k, kis szöveges adatfájlok, amelyek a meglátogatott weboldal szervere és a böngészőnk közötti kommunikációt segítik.

    suti

    Amikor meglátogatsz egy weboldalt és elfogadod a sütiket a többekközött a következő információk tárolódhatnak el a számítógépeden:

    • mikor érkeztél
    • milyen nyelven beszélsz
    • mi a nick neved
    • milyen böngészőt használsz, stb.

    Ha legközelebb visszatérsz tudni fogják, hogy már egy törzsvendégről van szó. A megfelelő neven és nyelven fognak megszólítani,  az érdeklődésének megfelelő tartalmat ajánljanak majd neked.

     

    Jobb felhasználói élmény és személyre szabott szolgáltatások = sütik

     

    A sütik abban segítenek, hogy az oldalak böngészése kényelmes és gyors legyen a felhasználó számára. Emellett olyan funkciókat tesznek elérhetővé, amelyek által személyre szabott szolgáltatást kaphatunk az egyes weboldalakon. A sütik tehát növelik a felhasználói élményt.

    sutik

     

    Persze a sütik elfogadása nem kötelező. Ha nem fogadtad el, a weboldal ezeket az adatokat mindig meg fogja kérdezni a tőled. És elsőre nem biztos, hogy a megfelelő nyelven. És az sem biztos, hogy a neked ajánlott operett előadás igazán érdekelni fog.

     

    A sütik elhelyezése nem jelent veszélyt a számítógépünkre vagy adatainkra, ugyanis:

     

    • Nem terjesztenek vírust, nem fertőzik meg a számítógépünket
    • Nem férnek hozzá a személyes adatainkhoz
    • Nem alkalmasak kémkedésre
    • Nem élnek vissza a gyűjtött adatokkal

     

    web-security

    Ugyanakkor a sütik tárolhatnak olyan adatokat, amik felhasználhatóak pl. reklám célra, így bizonyos szempontból alkalmasak lehetnek a látogató figyelmének vezetésére. Persze ez lehet hasznos is a jövőben, mert a személyre szabott reklámok azért kevésbé idegesítők, mint azok, amik téged biztosan nem érdekelnek.

     

    Miért figyelmeztetnek minden alkalommal?

     

    Egy új Európai uniós szabályozás szerint a sütiket alkalmazó weboldalak látogatójának joga van tudni, hogy az adott oldalak milyen fájlokat milyen célból helyeznek el a számítógépén. Ez alapján eldönthetjük, hogy engedélyezzük-e az adatfájlok elhelyezését, vagy sem. A legtöbb böngészőben kikapcsolhatjuk a sütik kezelését, ám ilyen esetben előfordulhat, hogy az oldal nem fog rendeltetésszerűen működni.

     

    Happy coding!
    GeorgeL - Kód Akadémia

    Felhasznált források: Netbarat, Webonic