[info] WordPress bemutatása, telepítése, biztonságossá tétele

A WordPress a világ egyik legelterjedtebb tartalomkezelő rendszere (angol szóval élve CMS, azaz Content Management System), mely alkalmas honlapok és webáruházak létrehozására.

WordPress bemutatása

WordPress telepítőcsomag letölthető a wordpress.org oldalról.

WordPress telepítése

WordPress localhost telepítés

  1. XAMPP telepítése a számítógépre
  2. WordPress csomag letöltése: http://wordpress.org/
  3. Magyar nyelvű WordPress letöltése: http://hu.wordpress.org/
  4. Mindkét csomag kibontása, az angol nyelvű "wordpress" mappa átnevezése localhost-ra, majd magyar nyelvű csomagból a /wp-content/languages mappa áthelyezése a localhost mappa wp-content mappájába. Ezután a magyar nyelvű mappa törölhető. Tehát a WordPress telepítést mindenképpen az angol nyelvű csomagból végezzük, ne a magyarból!
  5. A localhost mappa tartalmát helyezzük el a Xampp alap könyvtárába (az operációs rendszertől függően ezen mappa neve lehet htdocs, html, public_html, localhost, stb.).
  6. Hozzunk létre MySQL adatbázist a WordPress számára.
  7. A wp-config-sample.php fájl másolása és átnevezése wp-config.php-ra, majd az alábbi adatok módosítása:
    • define('DB_NAME', 'database_name_here'); => define('DB_NAME', '[LÉTREHOZOTT MYSQL ADATBÁZIS NEVE]');
    • define('DB_USER', 'username_here'); => define('DB_USER', 'root');
    • define('DB_PASSWORD', 'password_here'); => define('DB_PASSWORD', '');
    • define('WP_DEBUG', false); => define('WP_DEBUG', true);
  8. Helyezzük el a wp-config.php fájlban az alábbi sorokat:
    • define('WP_DEBUG_LOG', true); // enable Debug logging to the /wp-content/debug.log file
    • define('WP_DEBUG_DISPLAY', true); // display errors and warnings
    • define('SCRIPT_DEBUG', true); // display errors and warnings
    • define('SAVEQUERIES', true); // save queries for analysis
    • define('FS_METHOD', 'direct'); // enable easier localhost updating
    • ini_set('log_errors',TRUE);
    • ini_set('error_reporting', E_ALL);
    • ini_set('error_log', dirname(__FILE__) . '/error_wplog.txt');
  9. A https://api.wordpress.org/secret-key/1.1/salt/ oldalon generáljunk új biztonsági kulcsokat, majd írjük felül a meglévő put your unique phrase here kódokat.
  10. Amennyiben a későbbiekben a WordPress frissítések FTP-re hivatkozva nem hajtódnak végre, helyezzük el az alábbi sort a wp-config.php fájlban: define('FS_METHOD', 'direct');
  11. Érdemes a WordPress Reset plugint is telepíteni, amivel egyszerűen visszaállítható minden a kiindulási állapotra (természetesen ez csak localhoston szerencsés, éles weboldalon nem): https://wordpress.org/plugins/wordpress-reset/
  12. Sok hiba kiküszöbölésében segít, figyelmeztet az alábbi plugin: https://wordpress.org/plugins/query-monitor/

WordPress speciális beállítások

  1. Biztonsági beállítások:
    • A sablonszerkesztő letiltásához a wp-config.php fájlban a /* That's all, stop editing! Happy blogging. */ sor felé helyezzük el az alábbi kódot: define('DISALLOW_FILE_EDIT', true);
    • Hozzáadás a wp-config.php fájlhoz: define('WP_AUTO_UPDATE_CORE', true);
    • A wp-cron.php használata alapértelmezett, a WordPress minden oldalmeghíváskor lefuttatja, mely lassítja a rendszert nagy látogatottság esetén, ezért célszerű letiltani: define('DISABLE_WP_CRON', true); // disable WP cron, use wp-cron-multisite.php instead. Majd egy cron jobot létrehozni manuálisan a szerveren erre a fájlra vonatkozólag.
  2. A bejegyzés revíziójának letiltásához a wp-config.php fájlban a /* That's all, stop editing! Happy blogging. */ sor felé helyezzük el az alábbi kódot: define('WP_POST_REVISIONS', false);
  3. A WordPress multisite alkalmazásához a wp-config.php fájlban a /* That's all, stop editing! Happy blogging. */ sor felé helyezzük el az alábbi kódot: define('WP_ALLOW_MULTISITE', true);. A hálózat tényleges telepítéséhez az installált WordPress adminisztrációs felületén belül lépjünk az Eszközök > Hálózat telepítés almenüpontra, majd kövessük az ott megjelenő utasításokat!

Ajánlott WordPress pluginek

Kötelező minimum beállítások

Speciális beállítások


Egyedi beállítások alkalmazása

Az egyedi beállításokat és egyedi fejlecet a megnevezésnek megfelelően egyedi igények esetén kell használni, ezekre alapvetően nem mindig van szükség.

Sablonhoz kötődő egyedi beállítások megvalósításához a sablon mappájában található functions.php fájlba kell elhelyezni azokat a függvényeket, amelyekre szükség van. (Ha nincs functions.php fájl, akkor természetesen létre kell hozni.)

Egyedi WordPress plugin fejléc (plugin index.php)

Egyedi plugin fejléc egyedi plugint létrehozásakor szükségeltetik (tehát a /wp-content/plugins/ alatt létrehozott, fejlesztő által készített plugin esetén).


/*
Plugin Name: [PLUGIN NAME]
Plugin URI: https://www.mangoRDI.com/
Description: WordPress Plugin for [CLIENT] by mangoRDI
Version: [2015.01.01.]
Author: [Harkály Gergő] | mangoRDI
Author URI: https://www.mangoRDI.com/
*/

Egyedi funkciók


// add theme post thumbnail support
add_theme_support('post-thumbnails');

// remove dashboard WordPress logo
add_action('admin_bar_menu', function($wp_admin_bar)
{
$wp_admin_bar->remove_node('wp-logo');
}, 999);

// remove update notification in dashboard
add_action('admin_menu', function()
{
remove_action('admin_notices', 'update_nag', 3);
});

// remove generator version
add_filter('the_generator', function()
{
return '';
});

// custom dashboard footer
add_filter('admin_footer_text', function()
{
echo '© '.date('Y').' MediaMulti.Network | '.date('Y.m.j. H:i:s e');
});

// custom login screen
add_action('login_head', function()
{
echo '<style>
#login h1 { display:none; }
body.login { background-color:#e5e5e5; }
body.login div#login form#loginform { border-radius:10px; }
body.login div#login p#backtoblog, body.login div#login p#nav { background-color:white; border-radius:10px; }
</style>';
});

// remove dashboard widgets
function remove_dashboard_meta()
{
remove_meta_box('dashboard_plugins', 'dashboard', 'normal');
remove_meta_box('dashboard_primary', 'dashboard', 'normal');
remove_meta_box('dashboard_secondary', 'dashboard', 'normal');
remove_meta_box('dashboard_quick_press', 'dashboard', 'core');
}
add_action('admin_init', 'remove_dashboard_meta');
remove_action('welcome_panel', 'wp_welcome_panel');

// add custom dashboard widget
add_action('wp_dashboard_setup', function()
{
global $wp_meta_boxes;
wp_add_dashboard_widget('custom_help_widget', 'Infobox', function()
{
echo 'Lorem ipsum.';
});
});

Egyedi WordPress sablon stíluslap (theme style.css)


/*
Theme Name: [Theme name]
Theme URI: https://www.mangoRDI.com/
Version: [2015.01.01.]
Author: [Harkály Gergő] | mangoRDI
Author URI: https://www.mangoRDI.com/
Description: WordPress Template for [CLIENT] by mangoRDI
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: [black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready]
Text Domain: [templatetextdomain]
*/

Egyedi WordPress sablon fejléc (theme header.php)


<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-control" content="public">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?php bloginfo('description'); ?>">
<meta name="keywords" content="">
<title><?php wp_title(); ?></title>
<link rel="icon" type="image/png" href="/favicon.png" />
<?php wp_head(); ?>
</head>

WordPress sablonkészítés

Ez nem hivatalos sablonkészítési folyamat, olyan nem létezik a WordPress esetében, én csak a saját tapasztalataim alapján építettem fel a menetrendet:

1. sablon kiválasztása és letöltése után ha van benne single.html, akkor azt elkezdeni átszerkeszteni single.php-ra, átírva a címet, tartalmat, meta tagokat, kommentelést.

2. tárhelyen létrehozni index.php-t, megfelelő style.css-t, feltölteni a segédfájlokat (img, js), majd a megszerkesztett single.php-t is, hogy megtekinthessük, eddig működik-e.

3. ha működik, szedjük ki a single.php-ból a header.php, footer.php és sidebar.php-ba való részt, meg amit még akarunk, és nézzük meg, hogy így is megy-e minden.

4. másoljuk le a csökkentett tartalmú single.php tartalmát és illesszük be a page.php-ba, de innen törölhetjük is a comment formot, mert Oldalnál nem nagyon szoktak kommentelést engedni.

5. a page.php tartalmát másoljuk le és illesszük be az archive.php, category.php oldalakba.

6. ha van üzenetküldési oldal, akkor a page.php-ból készítsük el azt is, például page_contact.php néven.

7. a page.php tartalmából létrehozhatjuk az index.php-t is, viszont az index.php-nál nagyon figyelnünk kell arra, hogy a főoldali headerben több programhívás lehet, mint az eredetileg szerkesztett single.html-ben.

WordPress Multisite létrehozása

1. wp-config fájlba a define('WP_ALLOW_MULTISITE', true); sor beillesztése. Ettől függetlenül telepítésnél ugyanúgy megy minden, mint eddig, illetve elméletileg meglévő, futó wp esetén is be lehet ezt illeszteni.

2. Ekkor megjelenik egy új opció az admin oldalsávjában, mint Hálózat telepítése (talán az eszközökön belül). Arra kattintva el kell dönteni, hogy aldomain vagy almappa szerint működjön a hálózat. Én almappát javasolnék nektek most, mert az aldomainhez az adott domainhez be kell állítanom a wildcardot is (wildcard: nagyon leegyszerűsítve: a tárhelyre felveszem a *.valami.hu domaint a valami.hu-hoz, a csillag helyére meg mehet bármilyen szöveg, például így létrehozható már olyan aloldal a hálózatban, hogy fejlesztes.valami.hu).

3. Almappa opció választása után két fájlt kell módosítani, az egyik a wp-config.php, a másik a .htaccess. A kapott kódokat kell belemásolni, majd újra be kell jelentkezni a wp-be.

4. Ha mindent jól csináltunk, most már hálózatként működik a wp, de a különbség alig látható. A fenti menüsávon viszont megjelent egy olyan, hogy Honlapjaim -> Hálózat kezelő. Arra kattintva egy másik adminba jutunk, itt hálózati oldalról tudjuk szabályozni az egészet, azaz itt kapcsolhatsz be úgy plugineket és sablonokat, hogy az onnantól kezdve az összes aloldalon működjön.

5. A Hálózat kezelő -> Weboldalak -> Új hozzáadása opcióval hozhatunk létre új aloldalakat, melyek aztán sorra megjelennek a Honlapjaim lenyíló menüben.

Aki kipróbálja a hálózat létrehozását, csinálja ésszel. Minden egyes új létrehozott aloldal bőven ír az adatbázisba is, attól függetlenül, hogy használod-e vagy sem. Feleslegesen ne növeljük dinamikusan az adatbázis méretét, csak annál többet kell lementenem.

Arra nagyon is érdemes figyelni, hogy milyen plugineket használtok. Néhány plugin nem működik hálózatban, hiába próbáljátok. Néhány működik, de valamiért nem képes létrehozni az adatbázisban a táblákat, tehát bekapcsol, de sorra fog keletkezni error_log fájl a tárhelyeteken, hogy a wp nem tudott hozzáférni a táblához (mert nem jött létre, a plugin nem csinálta meg, ezeket én szoktam manuálisan létrehozni ilyenkor). És persze van a gond nélkül működő plugin is.

Ha új aloldalt hoztok létre, legyen a legeslegelső a Captcha beállítása! Ha csak egy aloldalon is elfelejtitek beállítani, bukta lesz, mert ott bizony be fog mászni egy féreg, amit nehéz kiírtani. Tehát erősen át kell gondolni, hogy milyen pluginekre van szükség és egy-egy új bekapcsolásakor az összes aladminban azokat be kell állítani.

Hálózat felállítása előtt javaslom nagyon-nagyon jól megtervezni, hogy mire van szükség. Én van, hogy elgondolom, aztán kb. háromszor még leverem az egészet és újrahúzom, mert jobb, más struktúrájú ötletem támadt. A javaslatom valami ilyesmi lenne: legyen egy "demo" aloldal, ami csak arra van, hogy másoknak tudtuk hozzá különböző jogosultságot adni, hogy megnézzék belülről. Például ha be akarom mutatni egy leendő ügyfélnek, hogy kell majd szerkeszteni, mit kell csinálni, akkor ez tökéletes erre, létrehozok egy wpdemo felhasználót, csak a demo aloldalhoz adom hozzá, wpdemoként be tud majd lépni és tud egy kicsit turkálni a szinte üres adminban. Második legyen a dev vagy fejlesztes. Én erre kapcsolom be első körben a plugineket, ha valamit ki akarok próbálni. Nem az egész hálózatban, csak itt! Nem terhelem be az összes hálózati oldal tábláját esetleg feleslegesen a plugin infóival. Ha itt jól megy minden, akkor kapcsolom be a hálózatba, ha nem, törlöm, de így legalább tudom, hogy ez a dev-es tábla akár egy az egyben ürithető bármikor, mert szemetelésre, próbálgatásra használom. Harmadiknak meg mondjuk lehet a project aloldal, ahol a tényleges projektek létrehozása zajlik, mintha épp egy különállló oldalt üzemelnél be. Persze ez mehet a főoldalon is akár (valami.hu), nem feltétlen kell neki aloldal.

Hálózatot tehát nem kötelző létrehozni, de már ketten is érdeklődtek, hogyan kell, azért publikáltam a folyamatot. Aki akarja, kipróbálja, nem feltétlen van rá szükségetek szerintem.

WordPress biztonságossá tétele

  • readme és licensz fájlok törlése (vagy fájljellemzők módosítása) a gyökérkönyvtárból
  • A wp-config.php és néhány másik file elérésének levédése a .htaccess fájlba helyezett alábbi kóddal:
    
    # protect some files for security reasons
    <FilesMatch "wp-config.php|wp-config-sample.php|install.php|readme.html|licence.txt">
        order allow,deny
        deny from all
    </FilesMatch>
    
  • az egyes verziószámok elrejtéséhez a sablon/functions.php fájlban (vagy valamely bővítményben az alábbi kód elhelyezése:
    
    // remove version from frontend code
    add_filter('the_generator', 'polygons_remove_version');
    function polygons_remove_version()
    {
    	return '';
    }
    

    Objektum-orientált megoldásban:
    
    class Polygons_WordPress
    {
    	public function __construct()
    	{
    		// remove version number from WordPress frontend code
    		add_filter('the_generator', array($this, 'polygons_remove_version'));
    	}
    	public function polygons_remove_version()
    	{
    		return '';
    	}
    }
    

WordPress "hook"-ok használata, példával

WordPress-ben vannak úgynevezett "hook"-ok, amikre "rá lehet akaszkodni", "rá lehet kapaszkodni".

Alapvetően a hook-ra való csatlakozásra két függvény szolgál: add_filter() és add_action()

Ezeknek 2, 3 vagy 4 paramétere lehet, az első paraméter az a WordPress funkció, amikor történjen valami.

Hogy mi történjen, azt a második paraméter határozza meg, a második paraméter a végrehajtandó függvény neve.

A harmadik paraméter - ami opcionális - egy prioritást fejez ki (alapértelmezetten 10), ez határozza meg, hogy egyes funkciók mikor fussanak le.

A negyedik paraméter pedig a kapcsolódó függvény paramétereit adja meg.

Egyszerű példa:


<?php
add_action('wp_head', 'hello_world_function', 10); // a WP fejlécében (lényegében minden oldalletöltéskor) lefut a hello_world_function funkció is.
function hello_world_function()
{
	echo 'Helló Erik';
}

Csatlakozzunk tehát rá a save_post hook-ra, amikor fut le, mikor rámentenek egy bejegyzésre, a függvényünk, ami pedig meghívódjon, legyen a kepfelirat_mentes függvény


add_action('save_post', 'kepfelirat_mentes', 10, 1);
function kepfelirat_mentes($post_id)
{
	// mentéskor az űrlapban megadott input mezők átküldésre kerülnek egy $_POST[] tömbben, ugye a te input mezők nevei alapján tudsz rá hivatkozni
	// például $_POST['xkoordinata']; $_POST['ykoordinata']; ----- nem tudom, milyen neveket adtál az inputoknak, ezért példaként ezeket használom, nyilván átírandó
	$x = $_POST['xkoordinata'];
	$y = $_POST['ykoordinata'];
	// ezután össze kellene gyűjtenünk ezeket az értékeket valamilyen formátumban, amit utána könnyű feldolgozni is, például | (CTRL+W) jellel elválasztva az értékeket:
	$data = $x.'|'.$y; // és így tovább ....
	// majd el kell menteni ezeket az adatbázisba
	update_post_meta($post_id, 'kepfeliratparameterek', $data); // itt a kepfeliratparameterek megint csak példa, tetszőleges név használható, később erre hivatkozva kérhető le adatbázisból a képhez tartozó érték
}

Később, frontenden egyszerűen meg lehet majd kapni a megadott paramétereket:

$kepfeliratparameterek = get_post_meta($post_id, 'kepfeliratparameterek', true);

Ugye ezt szét kell majd robbantani az elválasztójelek mentén, például:

$kepfeliratparameterekArray = explode('|', $kepfeliratparameterek);

Utána az egyes paraméterek kinyerhetőek a tömbből, például:


$x = $kepfeliratparameterekArray['0'];
$y = $kepfeliratparameterekArray['1'];

Emellett admin oldalon is fel kell dolgozni a tömböt, ha van már érték az adatbázisban, azt a termék szerkesztésekor be kell írni minden rublikába, erre is volt példakód szerintem.