Jak používat Microsoft Expression s WordPressem

Úvod

Microsoft Expression je nástroj, který vám umožní navrhovat a vytvářet webové stránky i bez hlubokých znalostí kódu. WordPress je platforma pro blogy a weby, která nabízí širokou škálu pluginů a šablon. V tomto návodu se dozvíte, jak propojit Microsoft Expression s WordPressem a pomocí něj upravit vzhled vašeho tématu.

Krok 1 – Založení a instalace WordPressu

Vytvořte si účet na WordPress.com nebo se přihlaste ke svému existujícímu účtu. Stáhněte si WordPress a nainstalujte jej na svůj počítač podle pokynů. Poznamenejte si, kde jsou soubory WordPressu uloženy, abyste je později snadno našli.

Krok 2 – Vytvoření základních stránek a příspěvků

V administračním rozhraní WordPressu vytvořte čtyři stránky: Home, About, Contact a Blog. Na stránce Blog vytvořte alespoň pět příspěvků a dvě kategorie. Nový příspěvek přidáte kliknutím na „New Post“ a kategorii přiřadíte pomocí tlačítka „+“ pod „New Categories“.

Krok 3 – Výběr a úprava šablony

V sekci Appearance → Themes vyberte šablonu, která se vám líbí a která co nejvíce odpovídá vašemu konceptu. Tuto šablonu později upravíte v Microsoft Expression.

Krok 4 – Příprava projektu v Microsoft Expression

Spusťte Microsoft Expression a vytvořte nový projekt. Uložte jej do kořenové složky instalace WordPressu. Odstraňte ve výchozím souboru veškerý CSS kód, aby byl soubor prázdný. Otevřete svůj WordPress blog v prohlížeči a zobrazte zdrojový kód (např. Ctrl+U ve Firefoxu). Zkopírujte celý kód (Ctrl+C).

Krok 5 – Integrace kódu a úprava CSS

V Microsoft Expression vložte zkopírovaný zdrojový kód do nového HTML souboru a uložte jej např. jako test.html do kořenové složky WordPressu. Najděte v kódu odkaz na CSS soubor (např. href="…/wp-content/themes/…/style.css") a upravte cestu tak, aby směřovala na lokální soubor šablony na vašem disku (href="wp-content/themes/[název‑vámi‑zvolené‑šablony]/style.css"). Tím zajistíte, že veškeré změny provedené v Expression se projeví na vašem webu.

Uložte soubor, přepněte v Expression na rozdělený pohled (split view) a sledujte změny v reálném čase. Nyní můžete pomocí nástrojů Microsoft Expression upravovat vzhled stránky a okamžitě vidět výsledek v testovacím HTML souboru.

Tip

• Po každé úpravě kódu v Microsoft Expression nezapomeňte soubor uložit.