---
title: "Szerkesztői felület formázása, sablonéhoz hasonlóra"
url: "https://wphu.org/tippek-trukkok/szerkesztoi-felulet-formazasa-sablonehoz-hasonlora/"
date: "2016-05-11"
modified: "2026-01-17"
author: "Rottenbacher Tamás"
language: "hu_HU"
categories: ["Tippek, trükkök"]
tags: ["forráskód", "functions.php", "megjelenés", "trükk", "vizuális szerkesztő", "wordpress developer"]
featured_image: "https://wphu.org/wp-content/uploads/2026/01/wp-szerkesztofelulet-1140x679.png"
---

# Szerkesztői felület formázása, sablonéhoz hasonlóra

Biztos előfordult már sokakkal, hogy zavarta az, hogy a WordPress belső szerkesztői felülete – ahol a bejegyzéseket és oldalakat írjuk, módosítjuk – milyen jó is lenne, ha az általunk használt betűtípust és formázást jelenítené meg. Ilyen a betűszín, háttérszín, sormagasság, egyes elemek távolsága és így tovább. Könnyebben lehetne formázni a tartalmainkat és feltétlen kellene többször módosítani, miközben egy másik ablakban nézzük az eredményt, melyet a sablonunk formáz a véglegesre. Mi lenne ha a sablon tartalom formázást a szerkesztői felületbe is meghívnánk?Könnyítenénk a saját vagy a tartalmat kezelő személy dolgán.

### Hogyan húzzuk be a sablon formázást a szerkesztői felületbe?

A [WordPress Developer Resources oldalon](https://developer.wordpress.org/reference/functions/add_editor_style/) lelhető fel a megoldás, azonban a könnyítésképpen itt megmutatjuk nektek. Elegendő a sablonotok[functions.php fájlát kiegészíteni](https://rotisoft.hu/blog/wordpress-functions-php-szerkesztese/?utm_source=wphu&utm_medium=cikk&utm_term=wordpress&utm_content=Szerkesztői%20felület%20formázása,%20sablonéhoz%20hasonlóra&utm_campaign=wphucikkek) az alábbi kóddal és ügyelni arra, hogy [UTF-8 módon mentsétek, BOOM nélkül](https://rotisoft.hu/blog/utf8-bom-nelkul-menteni/?utm_source=wphu&utm_medium=cikk&utm_term=wordpress&utm_content=Szerkesztői%20felület%20formázása,%20sablonéhoz%20hasonlóra&utm_campaign=wphucikkek).

#### Szükséges kód

Ha a stíluslapot szeretnénk behúzni:

```
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
```

Ha Google Font-ot használunk és nem a css @import-al hívjuk meg, akkor azt az alábbi kódot használjuk:

```
function wpdocs_theme_add_editor_styles() {
    $font_url = str_replace( ',', '%2C', '//fonts.googleapis.com/css?family=Lato:300,400,700' );
    add_editor_style( $font_url );
}
add_action( 'after_setup_theme', 'wpdocs_theme_add_editor_styles' );
```

Lényegében ennyi is az egész! Arra azonban ügyeljünk, hogy sablonunktól függően előfordulhat, hogy a megjelenés css fájla galibát okozhat a szerkesztőben. Ezt úgy tudjuk orvosolni, hogy létrehozunk a sablon mappájában egy másik, például style-szerkhez.css -t és ebbe a fájlba másoljuk át a tartalmi formázást módosító css kódokat, majd csak azt hívjuk meg a fenti kóddal.