僕がWordPressを始めた頃に分かんなかったベーシックなところを分かりやすく説明する試み

2011年11月11日、ネスト赤羽というインキュベーション施設の一室で、WordPressについてお話させて頂きました。(勉強会サイトのレポート

試みの中身

タイトルは「テンプレートタグの使い方」的なものですが、メインにお伝えしようとしたのは、

  • WordPressって、どうやって動いてるの?
  • phpとhtmlの関係ってどうなってるの?
  • データベースの役割って?
  • サーバってそもそもなんなのさ

といった内容です。

続きを読む 僕がWordPressを始めた頃に分かんなかったベーシックなところを分かりやすく説明する試み

WordPress管理画面の研究2:index.php

前回はファイル構成をみました。

今回は、wordpress/wp-admin/index.phpです。

管理画面の一番最初のファイルです。

コメントと基本の関数ファイルの読み込み

/**
 * Dashboard Administration Panel
 */

/** Load WordPress Bootstrap */
require_once('./admin.php');

/** Load WordPress dashboard API */
require_once(ABSPATH . 'wp-admin/includes/dashboard.php');

管理画面です。
wordpress/wp-admin/admin.phpと、wordpress/wp-admin/includes/dashboard.phpを読み込んでいます。

ウィジェットやJavaScriptなどの読み込み

wp_dashboard_setup();

wp_enqueue_script( 'dashboard' );
wp_enqueue_script( 'plugin-install' );
wp_enqueue_script( 'media-upload' );
wp_admin_css( 'dashboard' );
wp_admin_css( 'plugin-install' );
add_thickbox();

wp_dashboard_setup();は、dashboard.phpで最初に定義されている関数で、その中に、wp_add_dashboard_widget($widget_id, $widget_name, $callback, $control_callback)というダッシュボードに表示されるウィジェットを表示する関数がたくさん入ってます。

wp_enqueue_script()は、JavaScriptファイルをロードする関数です。
wp_admin_css()は、cssファイルをロードする関数です。
add_thickbox()は、投稿画面で画像をアップロードするときにポップアップというかモーダルウィンドウというか、あの効果を使うためのJSやcssが読み込まれます。

変数

$title = __('Dashboard');
$parent_file = 'index.php';

タイトルや親ファイル。

ヘルプメッセージ

add_contextual_help($current_screen,

	'<p>' . __('Welcome to your WordPress Dashboard! You will find helpful tips in the Help tab of each screen to assist you as you get to know the application.') . '</p>' .
	'<p>' . __('The left-hand navigation menu provides links to the administration screens in your WordPress application. You can expand or collapse navigation sections by clicking on the arrow that appears on the right side of each navigation item when you hover over it. You can also minimize the navigation menu to a narrow icon strip by clicking on the separator lines between navigation sections that end in double arrowheads; when minimized, the submenu items will be displayed on hover.') . '</p>' .
	'<p>' . __('You can configure your dashboard by choosing which modules to display, how many columns to display them in, and where each module should be placed. You can hide/show modules and select the number of columns in the Screen Options tab. To rearrange the modules, drag and drop by clicking on the title bar of the selected module and releasing when you see a gray dotted-line box appear in the location you want to place the module. You can also expand or collapse each module by clicking once on the the module&#8217;s title bar. In addition, some modules are configurable, and will show a &#8220;Configure&#8221; link in the title bar when you hover over it.') . '</p>' .
	'<p>' . __('The modules on your Dashboard screen are:') . '</p>' .
	'<p>' . __('<strong>Right Now</strong> - Displays a summary of the content on your site and identifies which theme and version of WordPress you are using.') . '</p>' .
	'<p>' . __('<strong>Recent Comments</strong> - Shows the most recent comments on your posts (configurable, up to 30) and allows you to moderate them.') . '</p>' .
	'<p>' . __('<strong>Incoming Links</strong> - Shows links to your site found by Google Blog Search.') . '</p>' .
	'<p>' . __('<strong>QuickPress</strong> - Allows you to create a new post and either publish it or save it as a draft.') . '</p>' .
	'<p>' . __('<strong>Recent Drafts</strong> - Displays links to the 5 most recent draft posts you&#8217;ve started.') . '</p>' .
	'<p>' . __('<strong>Other WordPress News</strong> - Shows the feed from <a href="http://planet.wordpress.org" target="_blank">WordPress Planet</a>. You can configure it to show a different feed of your choosing.') . '</p>' .
	'<p>' . __('<strong>Plugins</strong> - Features the most popular, newest, and recently updated plugins from the WordPress.org Plugin Directory.') . '</p>' .
	'<p><strong>' . __('For more information:') . '</strong></p>' .
	'<p>' . __('<a href="http://codex.wordpress.org/Dashboard_SubPanel" target="_blank">Dashboard Documentation</a>') . '</p>' .
	'<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
);

管理画面右上の、「ヘルプ」というところをクリックすると出てくる、管理画面のお助けコンテンツです。
多分、一つ目の引数で表示場所を指定して、2個目の引数でメッセージ内容を記述。

HTMLソースを作る

最後に、色々と組み合わせてHTMLを作ってます。

require_once('./admin-header.php');

$today = current_time('mysql', 1);
?>

<div class="wrap">
<?php screen_icon(); ?>
<h2><?php echo esc_html( $title ); ?></h2>

<div id="dashboard-widgets-wrap">

<?php wp_dashboard(); ?>

<div class="clear"></div>
</div><!-- dashboard-widgets-wrap -->

</div><!-- wrap -->

<?php require(ABSPATH . 'wp-admin/admin-footer.php'); ?>

admin-header.php読み込み、タイトル書き出し、wp_dashboard()、admin-footer.php読み込みです。

WordPress管理画面の研究1:ファイルの構成

WordPressの管理画面がどのような仕組みで動いているのか、研究したいと思います。

ファイルの構成

URLを見てみると、管理画面のダッシュボードは、http://www.example.com/wp/wp-admin/index.phpとなっているので、大体がwp-adminディレクトリに入っているのでしょう。

主なところを見繕うと、

index.php
最初に読まれるファイルですし。
admin.php
パッと見、色々設定がありそうでした。
includes/dashboard.php
ダッシュボード、どうやって動いてるんでしょう。他にも、includesディレクトリにたくさん色々入ってます
admin-header.php / admin-footer.php
管理画面全体で共有されていると思われる、ヘッダ、フッタの出力用?
post.php / post-new.php
投稿の仕組みは抑えたい
upload.php / themes.php / plugins.php / users.php / tools.php など
左側メニューのリンク先でした。
cssディレクトリ
62個のcssが入っているのですが。。。
jsディレクトリ
60個のJavaScriptファイルが入ってます。

というわけで、次回以降、少しずつ色々見ていきたいと思います。

ワードプレスが動くとき、どんなphpが動いているか5:wp-settings.php

長いので、いくつかに分けて。

冒頭大事

/**
 * Used to set up and fix common variables and include
 * the WordPress procedural and class library.
 *
 * Allows for some configuration in wp-config.php (see default-constants.php)
 */

コメント部分訳。
WP全体で使う系の変数をセットアップして、処理やクラス的なライブラリをインクルードします。

ファイル読み込み

/**
 * Stores the location of the WordPress directory of functions, classes, and core content.
 */
define( 'WPINC', 'wp-includes' );

// Include files required for initialization.
require( ABSPATH . WPINC . '/load.php' );
require( ABSPATH . WPINC . '/default-constants.php' );
require( ABSPATH . WPINC . '/version.php' );

定数WPINCを定義して、ルートパス/wp-includes/にある3つのファイルを読み込む。

load.php
サーバやMySQL、ファビコン、メンテンナンス、時間、デバッグモード、何語か、wpdb、必須pluginなどの関数を定義しているみたい。
default-constants.php
$blog_id(複数ブログモードで使用)、クッキー、SSL、テンプレートパスなどの定数を定義してるみたい。
version.php
WPのバージョン情報、必要なphp/MySQLのバージョン、何語かについてなどを、$wp_version=’3.0.1’みたいに代入してる。

続きを読む ワードプレスが動くとき、どんなphpが動いているか5:wp-settings.php

ワードプレスのデータベースにアクセスする勉強するよ

WordPressの管理画面やデータベースのカスタマイズをするために、特に、ログインまわりの勉強をしたいので、以下のサイトで勉強します。

コーデックスの資料

データベース構造
作成されるデータベースの一覧がある。
関数リファレンス
下の方に、「ユーザーと投稿者の関数 」というのがある。情報の取得、追加、削除、判断、ログイン/ログアウトなどができる関数がある。
関数リファレンス/wpdb Class
SQL文の扱い方などについて書かれている。
アクションフック一覧
プラグインで、どのタイミングでオリジナルのプログラムを実行させるのかを、アクションフックに紐付けて決められるようだ。優先順位低めかも。
WordPress_Cookies(英語)
ワードプレスでクッキーがどのように使うのか。

以下は、ブログ記事など。

WordPress プラグイン作成前の基礎知識
プラグインの基本的な動作方法、フック、クエリ、データベース操作など。
WordPress – データベース接続
$count = $wpdb->get_var( “SELECT count(*) FROM $wpdb->users;”);などの取得他、INSERT文とかも。$wpdbはグローバル変数なんですね。
wordPressデータベースにアクセスする
1. データベースの構造 2. SELECT文を実行する 3. 例 4. 最新公開投稿10件 5. 最近90日間でコメントが多くついた投稿ベスト10
WordPressからデータベースに直接アクセスする
wpdbの分かりやすい例が載ってる。

がんばろー。