フロントページに動きをつけた

フロントページに動きをつけた。画像をダブルクリックすると、

クルっと回って、

画像が変更され来場者カウンターが表示される。

この変更方法をまとめる。

①来場者カウンターのためのテーブルを作成する。

CREATE TABLE wp_counter (
    id INT(11) NOT NULL PRIMARY KEY,
    count INT(11) DEFAULT 0
);
-- 初期値として行を挿入
INSERT INTO wp_counter (id, count) VALUES (1, 0);

上記のSQLをサーバー管理からデータベース→phpmyadminに進み、実行する。

このように実行すると、

テーブルが作成される。

②functions.phpに来場者カウンターを実行するコードを追記する。

functions.phpはいじってエラーになると大変なので、スニペットというプラグインを使って追記する。

そして、来場者カウンターのhtml部分をショートコード化する。

※プログラムは生成ＡＩで作成する。セキュリティ保持のため、サンプリングコードなし。

③画像をページ上部に配置する。

管理画面からカスタマイズ→サイドバーを表示→コンテンツ上部→ウィジェットを追加

→カスタムHTML

imgタグを追記して画像を配置。この後JavaScriptで管理するため、idを追記。

phpで設定したショートコードを追記する。

※セキュリティ保持のためサンプルコードなし。

④クッリクすると来場者カウンターを表示し、画像を入れ替えるJavascriptファイルをワードプレスのJavascriptを管理するフォルダに配置。

これで完成。

今回は、サーバー上でデータベースのテーブルを作成、phpの書き方、Javascriptの動きなど勉強になった。