WordPress の HTTPS 化入門

HTTPS を実現するためには、サーバーにSSL証明書をインストールする必要があります。

Let’s Encrypt はすべての人に無料の SSL 証明書を提供する非営利団体で、2020 年 2 月の時点で 10 億を超える証明書を発行しました。証明書を取得する最も簡単な方法は、EFF certbot tool を使用することです。そのサイトには、いくつかの異なる Web サーバーとオペレーティング システムの証明書をインストールおよび更新するための完全な手順が記載されています。

ローカル開発の場合、OpenSSL を使用して自己署名証明書を作成できますが、生成された証明書は他の人から信頼されないため、使用は限定されており、プライベート サーバーにのみ使用する必要があります。

HTTPS の Web サーバー レベルでは、WordPress に特に必要な追加または特別な設定はありません。 Web サーバーが適切に設定されていれば、WordPress はデフォルトで HTTPS の URL を使用できるようになります。

HTTP URL のデフォルトポートは 80番、HTTPS のデフォルトポートは 443番 です。これらのポートは、ネットワーク・ファイアウォールを介して開かないようにしてください。 Apache には mod_ssl モジュールが含まれており、これを有効にして適切に設定する必要があります。Certbot を使用している場合は、必要な VirtualHost 設定を自動的に設定し、作成できます。

WordPressにHTTPSを導入する

WordPress に HTTPS サポートを実装する場合は、WordPress アドレスとサイトアドレスの URL を httpsに設定するだけです。 WordPress をインストールするには、HTTP または HTTPS のいずれかを使用して開始できます。どちらも機能し、後で切り替えることもできます。

 [設定] > [一般] に移動し、WordPress アドレス (URL) とサイト アドレス (URL) が https であることを確認します。そうでない場合は、http の後に「s」を追加し、https にして保存します。

サイトヘルス ([ツール] > [サイトヘルス]) は、Web サイトが HTTPS を使用していないことを通知します。

バージョン5.7以降、SSL証明書がすでにサーバーに設定されている場合、WordPress は自動的に HTTPSに切り替えることもできます。

WordPressのHTTPS化ベストプラクティス

すべての本番WordPressサイトでは、HTTPS を使用することをおすすめします。

• 信頼できる Web ホストを利用する。ほとんどの Web ホストでは HTTPS サービスを標準で提供している。
• Let’s Encrypt の SSL 証明書を利用する。無料で使いやすい。
• SSL 対応 CDN から静的コンテンツを配信する。

HTTP トラフィックを HTTPS サイトにリダイレクトする必要があるかもしれません。 Apache の場合は、例えば VirtualHost エントリを2つ作成することで可能です：

<VirtualHost *:80>
    ServerName mkaz.blog
    Redirect / https://mkaz.blog/
</VirtualHost>

<VirtualHost *:443>
    ServerName mkaz.blog
    DocumentRoot /home/mkaz/sites/mkaz.blog
    <Directory /home/mkaz/sites/mkaz.blog>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    SSLEngine on
    SSLCertificateFile    /etc/letsencrypt/live/mkaz.blog/cert.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/mkaz.blog/privkey.pem
    SSLCertificateChainFile /etc/letsencrypt/live/mkaz.blog/fullchain.pem
    IncludeOptional /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>

WordPressのHTTPS化のバッドプラクティス

• HTTPS と HTTP URL の両方からサイトを提供する場合は、HTTPS を使用してリダイレクトする。
• HTTPS ページで、HTTP から提供される CSS、JS、画像などの混合コンテンツを使用する。

参考文献と役立つリンク

1. Why should I use HTTPS
2. Let’s Encrypt and Certbot
3. Apache Module mod_ssl – Apache モジュールの公式ドキュメント
4. Encrypting the Web (EFF.org)
5. HTTPS as a ranking signal (Google)
6. Best Practices Securing Your Site (Google)

Go back to the list of Blocks

With the WordPress Embed block, you can embed WordPress posts into your posts and pages. You don’t need a WordPress account to be able to use it. You can only embed public posts, though.

An Example:

Steps to embed a WordPress Post

1. You need to find the URL of the Post.

Find the URL of the WordPress post you want to embed in your page. Copy the link of that post from the search bar.

2. Go to your post or page
3. Add the WordPress block

Detailed instructions on adding blocks can be found here.

4. Paste the link into the text box and click the “Embed” button

If it’s a link that can be successfully embedded you will see a preview in your editor.

If you’re using a link that cannot be embedded, the block shows a message, “Sorry, this content could not be embedded.”

You will have two choices: Try again with a different URL or convert it to a link.

6. Click on “Preview” to see how it will look on the front-end.

Block Toolbar

Besides the Mover and Drag & Drop Handle, the Block Toolbar for the WordPress embed shows four buttons:

• Transform to
• Change alignment
• Edit URL, and
• More Options. 

Transform to:

You can transform a WordPress embed to a Group. This would give you the ability to change the background color around the WordPress embed.

Change Alignment – use reusable Block 

• Align left – Make the WordPress post left aligned
• Align center – Make the WordPress post alignment centered
• Align right – Make the  WordPress post align right

Edit URL

Via the edit URL, you can change the WordPress Embed URL in the embed block. Overwrite the existing URL and click on the “Embed” Button.

More Options:

Hide Block Settings

The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert Before

Insert a new block before the selected block(s).

Insert After

Insert a new block after the selected block(s).

Move To

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Block

With the Remove Block option, you can delete the selected block from your content.

Block Settings

Media Settings

Via the Media Settings you can control the behavior of your post embed when viewed from a smaller device, like on a phone screen.

The Toggle switch turns on or off the resize functionality for smaller devices. The default setting is “on” or blue.

“Off:” This embed may not preserve its aspect ratio when the browser is resized. In the off position the toggle switch is gray.

“On:” This embed will preserve its aspect ratio when the browser is resized. The toggle switch turns blue in the “On” position.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

原文

WordPress.tv の埋め込みブロックを使用して、WordPress.tv の動画を投稿またはページに追加できます。埋め込まれた動画にはパワフルな再生コントロールが含まれているため、再生中も視聴者をページにとどまらせることができます。動画を埋め込むのに WordPress.tv アカウントは必要ありませんが、公開されている必要があります。

埋め込まれた WordPress.tv の動画:

WordPress.tv から動画を埋め込む手順:

1. 動画のパーマリンクを探す

Web プレイヤーで動画を選んで、”SHARE” ボタンをクリックします。

2. 共有のセクションで、パーマリンクをクリックすると自動でコピーされます。または、リンクを選択してコピーすることもできます。

他の方法でもリンクを追加して埋め込めなかったら、再試行するか、URL をリンクに変換することができます。

3. WordPress.tv の埋め込みブロックをページ/投稿に追加します

ブロックを追加する詳細な手順はこちらから。

4. リンクをテキストボックスに貼り付けて、「埋め込み」ボタンをクリックします。

正しく埋め込めるリンクだった場合には、エディターにプレビューが表示されます。

埋め込めない URL を使用すると、ブロックに「If you use an URL that can’t be embedded, the block shows the message “Sorry, this content could not be embedded. (申し訳ありませんがこのコンテンツを埋め込むことはできませんでした。)」と表示されます。

別のURLで再試行するか、リンクに変換するか、2つの選択肢の中から選べます。

5. 「プレビュー」をクリックして、フロントエンドでどのように表示されるかを確認します。

ブロックツールバー

WordPress.tv 埋め込み用のブロックツールバーには「動画」と「ドラッグ & ドロップ」ハンドルの他に、4つのボタンが表示されます。

• Transform To (変換先)
• Alignment (配置)
• Edit URL (URL を編集)
• More Options (ほかのオプション)

変換先:

WordPress.tv 埋め込みブロックをグループに変換することができます。これにより、WordPress.tv の埋め込みブロックの背景色を変更することができます。

配置:

• 左揃え – ブロックを左揃えにします。
• 中央揃え – ブロックの位置合わせを中央に配置します。
• 右揃え – 右揃えブロックを作成します。
• 幅が広い – ブロックの幅をコンテンツサイズを超えて増やします。
• 全幅 – ブロックを拡張して画面の全幅をカバーします。

「ワイド幅」と「フル幅」の配置設定は、WordPressテーマで有効である必要があります。

URLを編集する

編集 URL を介して、埋め込みブロック内の WordPress.tv に埋め込む URL を変更することができます。既存の URL を上書きして、「埋め込み」ボタンをクリックしてください。

ブロックの設定

高度な設定

高度な設定のタブでは、ブロックに CSS クラスを追加して、カスタム CSS を記述して、ブロックを自由にスタイリングすることができます。

原文

Twenty Twenty-Four is the new, stylish and versatile, default theme for WordPress Version 6.4.

A block theme designed to take full advantage of full site editing capabilities, particularly the opportunities offered by patterns. Create new pages in a matter of moments by constructing them from the wide range of patterns that come bundled with the theme.

Quick specs

• Requires at least WordPress 6.4.
• Requires at least PHP version 5.6.

Full site editing support

Twenty Twenty-Four is designed to support full site editing’s powerful features, including:

• Site Editor: an editor that allows you to edit all parts of your site, navigate between templates, and more.
• Styles: a feature that allows you to customize your site, including individual blocks, as much as you’d like with different colors, typography, layouts, and more.
• Templates: edit, create, and manage templates used by pages, posts, and other content.
• Template parts: a way to organize and display groups of blocks as part of a block template mainly for site structure, like Headers and Footers.
• Theme blocks including the Navigation block, Query Loop block, and more.

Like its predecessor Twenty Twenty-Three, this theme is designed to use WordPress site-editing features instead of theCustomizer, which will be hidden by default. The Customizer may be automatically reactivated if you have plugins that require it.

One theme, many variations

In the past, default themes often centered around a specific topic or style. However, Twenty Twenty-Four breaks away from this tradition. This theme is thoughtfully designed to be your all-encompassing choice for any type of website, regardless of its specific focus.

The Twenty Twenty-Four theme allows users to change certain Templates to use alternative patterns designed for specific use-cases: Business (the default), Writer, and Portfolio.

Alternative patterns

Alternative patterns for the Writer and Portfolio types can be switched to for the following templates:

• Blog Home
• Index
• Archive
• Search

You can use the Replace Template functionality to select one of the alternative patterns for your current template.

1. When editing one of the Templates mentioned above – make sure the ‘Template’ tab of the sidebar inspector is selected.
2. Click the three dots next to the Template name, and select the ‘Replace Template’ option from the menu that appears.
3. You will be shown a selection of alternative patterns to choose from. Clicking to select one will replace the existing template contents with the new pattern.
4. Save the changes to your template.

Template Parts

Twenty Twenty-Four also includes a range of different layouts for the Header and Footer of your site. When editing your Templates you can replace the template part with one of the variants.

Custom Templates

Twenty Twenty-Four includes several custom page templates for you to use:

• Page no Title: the layout of a standard page, but with no page title at the top.
• Page with Sidebar: displays page content with a sidebar on the right hand side.
• Page with Wide Image: displays a wide featured-image with page title on the left, and content on the right.

Block patterns

Explore patterns to save time while crafting creative layouts. Patterns are collections of predesigned blocks whose text and media content can be quickly replaced by your own. Whether a call-to-action, an event announcement, or FAQ, patterns can help jump-start the creation of your page or post.

Style variations

Twenty Twenty-Four’s comes with a minimalist, but versatile, palette in monochromatic greys.

Prefer a different look? Visit the Styles area in the Editor and choose from 9 additional style variations to instantly switch up the design, including colors and typography.

Block variations

Twenty Twenty-Four comes with style variations for a number of blocks – allowing slightly different appearance from their defaults.

Heading block

Headings in Twenty Twenty-Four come with a variation that includes an Asterix as a bullet point above the heading.

When editing your headings – you will see an option in the sidebar to switch to the variant style. Selecting the ‘With asterisk’ style will keep the size and font of your heading – but add the stylized asterix above it.

List block

List items in Twenty Twenty Four come with a variation that uses a checkmark as bullet points instead of the default style.

When editing your list – you will see an option in the sidebar to switch to the variant style. Selecting the ‘Checkmark’ style will keep the swap the default bullet for a checkmark.

Details block

The Details block in Twenty Twenty Four come with a variation that uses an arrow to mark the summary instead of the default style.

When editing your Details block – you will see an option in the sidebar to switch to the variant style. Selecting the ‘Arrow icon’ style will keep the swap the default marker dor the summary section to use an arrow icon.

Navigation links

Links within Navigation blocks in Twenty Twenty Four come with a variation that adds an arrow to the right of the link text (sometimes used for indicating a link that leaves the main site).

When editing menu items – you will see an option in the sidebar (Style tab) to switch to the variant style. Selecting the ‘With arrow’ style will add the arrow to the right of the link text.

Category and Tag list blocks

Caterogy and Tag list blocks in Twenty Twenty Four come with a variation that styles each term as a ‘pill’ with a light background.

When the Category or Tag blocks within a Query Loop – you will see an option in the sidebar (Style tab) to switch to the variant style. Selecting the ‘Pill’ style will add a light background color (with rounded corners) to each term in the list..

Design specifications

Twenty Twenty-Four comes with the following defaults for style.

• Cardo Font for headlines.
• Sans-serif System font for paragraphs.
• Instrument Sans, Inter, and Jost as alternative fonts.
• The default color palette of Twenty Twenty-Four is light, providing a fresh and inviting appearance. The Style Variations (mentioned above) contain a range of alternative color palettes.
• A content width of 620 pixels and ‘Wide’ widthof 1280 pixels.

Should you wish – you can also view a more complete list of the spacing, color, and layout presets used by the theme. And remember, the Site Editor’s Styles tools give a wide range of options for customizing the style of your site beyond these defaults.

Support and resources

Get community help with Twenty Twenty-Four in its support forum.

Learn how to take full advantage of full site editing with the Simple Site Design with Full Site Editing course on Learn.WordPress.org.

Read more about the Twenty Twenty-Four theme in the introduction post.

セマンティックな個人情報発信プラットフォーム

はじめに

ようこそ。WordPress は私にとってとても特別なプロジェクトです。各開発者や貢献者が独自なものをそこに加え、みんなで一緒に美しいものを作り上げています。私はその一翼を担っていることを誇りに思います。たいへん多くの時間をかけて、WordPress をよりよいものにしようと私たちは日々力を注いでいます。WordPress を選んでいただきありがとうございます。

— Matt Mullenweg

インストール: 5分でインストール

1. zip ファイルを空のディレクトリに展開します。そしてすべてのファイルをアップロードしてください。
2. wp-admin/install.php をブラウザーで開きます。これによりデータベース接続のためのwp-config.php の設定を行います。
   1. 何らかの理由でこれがうまくいかなくても、心配しないでください。すべてのウェブホストでうまくいくわけではないのです。テキストエディター (訳注: 日本語版の場合、UTF-8 BOMなし (または UTF-8N) で保存できるエディターを用いてください。Windows の『メモ帳』は用いないでください) で wp-config-sample.php を開き、データベースの接続情報を記入してください。
   2. このファイルの名前を wp-config.php として保存し、アップロードしてください。
   3. wp-admin/install.php をブラウザーで開いてください。
3. いったん設定ファイルを設置すると、あなたのサイトに必要なデータベースのテーブルが設置されるはずです。もしエラーが発生するようなら wp-config.php ファイルをもう一度確認し、再度このインストーラーを試してください。それでも失敗する場合は、できるだけ多くのデータを集めてサポートフォーラム (英語) (WP 日本語フォーラム) に行ってください。
4. パスワードを入力しなかった場合、パスワードは自動生成されますので、これをメモしてください。ユーザー名を入力しなかった場合、ユーザー名は admin になります。
5. その後、このインストーラはあなたをログインページに案内するはずです。前に選んだユーザー名とパスワードでログインしてください。自動生成のパスワードを使った場合、管理画面の「プロフィール」をクリックしてパスワードを変更することができます。

更新

自動更新機能の利用

1. wp-admin/update-core.php をブラウザーで開き、指示に従います。
2. もっと何かしたかったですか ? これだけです !

手動更新

1. 更新前に、index.php など変更した可能性のあるすべてのファイルのバックアップコピーを必ずとってください。
2. 変更したファイルを保存し、古い WordPress のファイルを削除します。
3. 新しいファイルをアップロードします。
4. ブラウザーで /wp-admin/upgrade.php にアクセスします。

他のシステムからの移行

WordPress は 多くのブログシステムからインポート (英語) (日本語)することができます。まずは上記のように WordPress をインストールして動作させてください。その後に、インポートツールを使ってください。

動作環境

• PHP バージョン 5.6.20 以上
• MySQL バージョン 5.0 以上

推奨環境

• PHP バージョン 7.4 以上
• MySQL バージョン 5.7 以上、または MariaDB バージョン 10.3 以上
• Apache の mod_rewrite モジュール
• HTTPS のサポート。
• あなたのサイトに wordpress.org へのリンクを。

オンラインの資料

もしこの文書にあなたの疑問への答えが見つからなかったら、ぜひ WordPress の豊富なオンライン資料を利用してください。The WordPress Codex (英語) (WordPress Codex 日本語版) Codex は WordPress のすべてについての百科事典です。WordPress に関する最も総合的な情報源です。 開発ブログ (英語) (日本語訳) ここでは WordPress に関する最新のアップデートやニュースを知ることができます。最新の WordPress 開発ニュースは、デフォルトで管理ダッシュボードに表示されます。 WordPress Planet (英語) WordPress Planet はウェブ中の WordPress からの投稿を集めたニュースアグリゲーターです。 WordPress サポートフォーラム (英語) (WP 日本語フォーラム) 隅々まで探しまわってもなお答が見つからない場合、とても活発で大きなコミュニティを持つサポートフォーラムが役に立つでしょう。助けてもらうコツは、分かりやすいスレッドタイトルをつけて、質問の内容をなるべく詳しく書くようにすることです。 WordPress IRC (Internet Relay Chat) チャンネル (英語) WordPress を使っている人たちの話し合いに使用されているオンラインのチャットチャンネルがあり、時おりここでサポートに関する話題も扱っています。上記 wiki ページで案内されています。(irc.libera.chat #wordpress)

おわりに

• 提案、アイディア、コメントをお持ちだったり、あるいはバグ (うわっ !) を見つけたら、サポートフォーラム (英語) (WP 日本語フォーラム) に参加してみませんか ?
• WordPress はコードを簡単に拡張するための堅牢なプラグイン API (Application Programming Interface) を備えています。この利用に興味のある開発者は Codex のプラグインドキュメント (英語) (日本語) を参照してください。 ほとんどの場合、コアコードを変更するべきではありません。

分かちあい

WordPress には数百万ドルのマーケティングキャンペーンもなければ有名なスポンサーもいませんが、それよりもっとすばらしいみなさんがいます。もしあなたが WordPress を楽しんでくれているのなら、友達にそれを伝えてください。自分よりまだ WordPress の知識がない人のためにセットアップの手助けをしてください。あるいは、WordPress を見落としているメディアのライターにメールを送ってください。

WordPress は、Michel V がはじめた b2/cafélog を公式に引き継いだブログツールです。作業は WordPress の開発者たちによって続けられています。WordPress に支援をしていただけるのなら、どうか寄付をご検討ください。

ライセンス

WordPress は GPL (GNU General Public License) バージョン 2 またはそれ以降の (あなたの選択する) 任意のバージョンの条件に基づいてリリースされているフリーソフトウェアです。license.txt を参照してください。

<?php
/**
 * WordPress の基本設定
 *
 * このファイルは、インストール時に wp-config.php 作成ウィザードが利用します。
 * ウィザードを介さずにこのファイルを "wp-config.php" という名前でコピーして
 * 直接編集して値を入力してもかまいません。
 *
 * このファイルは、以下の設定を含みます。
 *
 * * データベース設定
 * * 秘密鍵
 * * データベーステーブル接頭辞
 * * ABSPATH
 *
 * @link https://ja.wordpress.org/support/article/editing-wp-config-php/
 *
 * @package WordPress
 */

// 注意:
// Windows の "メモ帳" でこのファイルを編集しないでください !
// 問題なく使えるテキストエディタ
// (http://wpdocs.osdn.jp/%E7%94%A8%E8%AA%9E%E9%9B%86#.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF 参照)
// を使用し、必ず UTF-8 の BOM なし (UTF-8N) で保存してください。

// ** データベース設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define( 'DB_NAME', 'database_name_here' );

/** データベースのユーザー名 */
define( 'DB_USER', 'username_here' );

/** データベースのパスワード */
define( 'DB_PASSWORD', 'password_here' );

/** データベースのホスト名 */
define( 'DB_HOST', 'localhost' );

/** データベースのテーブルを作成する際のデータベースの文字セット */
define( 'DB_CHARSET', 'utf8' );

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define( 'DB_COLLATE', '' );

/**#@+
 * 認証用ユニークキー
 *
 * それぞれを異なるユニーク (一意) な文字列に変更してください。
 * {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org の秘密鍵サービス} で自動生成することもできます。
 * 後でいつでも変更して、既存のすべての cookie を無効にできます。これにより、すべてのユーザーを強制的に再ログインさせることになります。
 *
 * @since 2.6.0
 */
define( 'AUTH_KEY',         'put your unique phrase here' );
define( 'SECURE_AUTH_KEY',  'put your unique phrase here' );
define( 'LOGGED_IN_KEY',    'put your unique phrase here' );
define( 'NONCE_KEY',        'put your unique phrase here' );
define( 'AUTH_SALT',        'put your unique phrase here' );
define( 'SECURE_AUTH_SALT', 'put your unique phrase here' );
define( 'LOGGED_IN_SALT',   'put your unique phrase here' );
define( 'NONCE_SALT',       'put your unique phrase here' );

/**#@-*/

/**
 * WordPress データベーステーブルの接頭辞
 *
 * それぞれにユニーク (一意) な接頭辞を与えることで一つのデータベースに複数の WordPress を
 * インストールすることができます。半角英数字と下線のみを使用してください。
 */
$table_prefix = 'wp_';

/**
 * 開発者へ: WordPress デバッグモード
 *
 * この値を true にすると、開発中に注意 (notice) を表示します。
 * テーマおよびプラグインの開発者には、その開発環境においてこの WP_DEBUG を使用することを強く推奨します。
 *
 * その他のデバッグに利用できる定数についてはドキュメンテーションをご覧ください。
 *
 * @link https://ja.wordpress.org/support/article/debugging-in-wordpress/
 */
define( 'WP_DEBUG', false );

/* カスタム値は、この行と「編集が必要なのはここまでです」の行の間に追加してください。 */



/* 編集が必要なのはここまでです ! WordPress でのパブリッシングをお楽しみください。 */

/** Absolute path to the WordPress directory. */
if ( ! defined( 'ABSPATH' ) ) {
	define( 'ABSPATH', __DIR__ . '/' );
}

/** Sets up WordPress vars and included files. */
require_once ABSPATH . 'wp-settings.php';

フォーラムに投稿したり、コメントするには、WordPress.org (今見ているこのサイト)にアカウントを作成し、ログインする必要があります。

WordPress.org アカウントの作成

1. https://login.wordpress.org/register?locale=ja にアクセスする。

2. ユーザー名、メールアドレスを入力し、「アカウントを作成」をクリックする。
3. 送られてくるメールのリンクに従ってパスワードを設定する。

WordPress.org へのログイン

1. https://login.wordpress.org/?locale=ja にアクセスする。

2. ユーザー名、パスワードを入力し、「ログイン」をクリックする。

WordPress relies heavily on the presentation styles within CSS. With the use of Themes, you have an almost infinite choice of layout options. WordPress Themes make it easy to change your website’s appearance, and open up the field to help you create your own Theme and page layout.

CSS stands for Cascading Style Sheets. It allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.

This article briefly describes the use of CSS in WordPress, and lists some references for further information. For information on CSS itself, see Know Your Sources#CSS.

WordPress and CSS

WordPress Themes use a combination of template files, template tags, and CSS files to generate your WordPress site’s look.

Template Files

Template files are the building blocks which come together to create your site. In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the default WordPress Theme, the multi-post view found on the front page, category, archives, and search web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can choose which parts and pieces appear on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see Stepping Into Templates.

Template Tags

Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in Stepping Into Template Tags.

Stylesheet

The CSS file is where it all comes together. On every template file within your site there are HTML elements wrapped around your template tags and content. In the stylesheet within each Theme are rules to control the design and layout of each HTML element. Without these instructions, your page would simply look like a long typed page. With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can “float” in the middle of the viewer’s screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the style.css file within each Theme folder.

Custom CSS in WordPress

Starting with WordPress 4.7, you can now add custom CSS to your own theme from the Appearance Customize Screen, without the need for additional plugins or directly editing themes and child themes. Just choose the Additional CSS tab when customizing your current theme to get started!

Any CSS changes you make will appear in the preview, just like other changes made in the customizer, this means you have time to tweak and perfect the look of your site, without actually changing anything until you are happy with it all!

Keep in mind that the CSS changes are tied in with your theme. This means that if you change to a new theme, your custom CSS styles will no longer be active (of course, if you change back to your previous theme, they will once again be there).

Why use Custom CSS?

There are a few reasons why:

• If you modify a theme directly and it is updated, then your modifications may be lost. By using Custom CSS you will ensure that your modifications are preserved.
• Using Custom CSS can speed up development time.
• Custom CSS is loaded after the theme’s original CSS and thus allows overriding specific CSS statements, without having to write an entire CSS set from scratch.

WordPress Generated Classes

Several classes for aligning images and block elements (div, p, table etc.) were introduced in WordPress 2.5: aligncenter, alignleft and alignright. In addition the class alignnone is added to images that are not aligned, so they can be styled differently if needed.

The same classes are used to align images that have a caption (as of WordPress 2.6). Three additional CSS classes are needed for the captions, and one more for accessibility. Together, the classes are:

/* WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

Each Theme should have these or similar styles in its style.css file to be able to display images and captions properly. The exact HTML elements and class and ID values will depend on the structure of the Theme you are using.

Templates and CSS

To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists:

• Using Themes – There are also many advanced articles in this list.
• Templates – Comprehensive list of WordPress Theme and Template articles.
• Theme Development – WordPress Theme Development guide and code standards.

WordPress Layout Help

If you are having some problems or questions about your WordPress Theme or layout, begin by checking the website of the Theme author to see if there is an upgrade or whether there are answers to your questions. Here are some other resources:

• Lessons on Designing Your WordPress Site
• Site Design and Layout – Comprehensive list of resources related to site design in WordPress.
• FAQ Layout and Design

CSS Resources

• Finding Your CSS Styles
• CSS Troubleshooting
• CSS Fixing Browser Bugs
• CSS Coding Standards
• CSS Shorthand
• Know Your Sources#CSS
• Conditional Comment CSS
• Validating a Website

Twenty Twenty-Three is the new, accessibility-ready, default theme for WordPress Version 6.1.

A minimalist block theme designed to take full advantage of full site editing capabilities, Twenty Twenty-Three includes a collection of ten community-submitted style variations. Explore the Styles panel and change the look-and-feel of your site in an instant – bold and bright, or soft and subtle, the choice is yours.

Quick specs

• Requires at least WordPress 6.1.
• Requires at least PHP version 5.6.

Full site editing support

Twenty Twenty-Three is designed to support full site editing’s powerful features, including:

• Site Editor: an editor that allows you to edit all parts of your site, navigate between templates, and more.
• Styles: a feature that allows you to customize your site, including individual blocks, as much as you’d like with different colors, typography, layouts, and more.
• Templates: edit, create, and manage templates used by pages, posts, and other content.
• Template parts: a way to organize and display groups of blocks as part of a block template mainly for site structure, like Headers and Footers.
• Theme blocks including the Navigation block, Query Loop block, and more.

Like its predecessor Twenty Twenty-Two, this theme is designed to use WordPress site-editing features instead of the Customizer, which will be hidden by default. The Customizer may be automatically reactivated if you have plugins that require it.

Templates

Twenty Twenty-Three includes several custom templates for you to use:

• Blank: this displays post content without any additional blocks. 
• Blog (Alternative): provides a different way of displaying blog posts, in a list format with the date on the left and the post title on the right.

Block patterns

Explore patterns to save time while crafting creative layouts. Patterns are collections of predesigned blocks whose text and media content can be quickly swapped out with your own. Whether a call-to-action, an event announcement, or a pricing table, patterns can help jump-start the creation of your page or post.

Style variations

Twenty Twenty-Three’s default colour scheme consists of a minimalist black-and-white palette, along with green accents.

Prefer a different look? Visit the Styles area in the Editor and choose from ten additional style variations to instantly switch up the design, including colors and typography.

Design specifications

Twenty Twenty-Three takes advantage of fluid typography presets, so that each piece of text can adapt to any screen size, automatically. The theme also uses fluid spacing presets, to help maintain consistency in the spacing between blocks at all screen sizes. If you’re interested in learning more about the sizes, spacing, and font families in those presets, check out Twenty Twenty-Three’s design specification. 

Support and resources

Get community help with Twenty Twenty-Three in its support forum.

Learn how to take full advantage of full site editing with the Simple Site Design with Full Site Editing Learn WordPress course.

Read more about the Twenty Twenty-Three theme in the introduction post.

Twenty Twenty-Two is the new default theme for WordPress Version 5.9.

Everyone deserves a truly unique website, built on a solid, well-designed foundation. Twenty Twenty-Two aims to help you achieve that by offering a wide set of patterns, templates, headers, footers, and custom color palettes. As the first-ever default block theme, Twenty Twenty-Two invites you to explore full site editing and create a site that reflects your individual vision. 

Quick Specs

• Requires at least WordPress 5.9.
• Requires at least PHP version 5.6.

Full Site Editing Support

Twenty Twenty-Two is designed to support all of the features of full site editing. This includes the following: 

• Site Editor: an editor that allows you to edit all parts of your site, navigate between templates, and more.
• Styles: a feature that allows you to customize your site, including individual blocks, as much as you’d like with different colors, typography, layouts, and more.
• Templates: edit, create, and manage templates that a page or posts uses.
• Template parts: a way to organize and display groups of blocks as part of a block template mainly for site structure, like Headers and Footers.
• Theme blocks including the Navigation Block, Query Loop block, and more.

Thanks to these options you should find that you won’t need to switch themes as often to create the desired look and feel of your site.

Keep in mind that Twenty Twenty-Two is designed to use the above features instead of the Customizer to edit your site. The Customizer will be hidden by default, though it may be reactivated if you have plugins installed that require it. 

Templates

Twenty Twenty-Two has three custom templates for you to use with your posts and pages:

• Blank: this includes the post content without any additional blocks. 
• Page (Large Header): this includes a big, visually interesting headline. 
• Single Post (No Separators), and Single Page (No Separators): These are the standard post/page templates, but with no horizontal separators on them. 

When exploring these templates and making them your own, be sure to take advantage of the Page patterns that you can use to build your templates. To learn more about templates and how to use them on your site, please read the Template Editor support article. 

Block Patterns

Twenty Twenty-Two comes with 64 patterns to create beautiful content from footers, headers, pages, and more. To learn more about block patterns and how to use them on your site, please read the Block Patterns support article. 

Here are just a few examples to look forward to:

Subscribe callout

Layered images with duotone

List of events

Color Palette

The theme provides several recommended colors that work well with the design of the theme. You can use these colors throughout your site including when customizing your site with the Styles feature or when customizing individual blocks. Duotone filters are also included as part of the color palette options so you can easily have all aspects of your site embrace a shared palette:

Black

White

Dark Green

Beige

Light Grey

Support and Resources

Get community help with Twenty Twenty-Two in its support forum.

Learn how to take full advantage of full site editing with the Simple Site Design with Full Site Editing Learn WordPress course.

Read more about the Twenty Twenty-Two theme in the introduction post.