WordPressでhtmlとCSSについておさらいをしてみる。Vol.1

独学でWEBデザインをしてきました。
私以外でも独学で勉強したり、会社でいきなりWEBなどをまかされた人は多いのではないでしょうか?
学校でWEBのデザインをしていた人には会ったことがありません。

ただ本を読んで、サイトを色々調べてこうすれば良いと言うことで過ごしてきましたがぼやっとしたWEBの知識なので一旦型にはめてもいいのかなと感じたので今回CSSについてまとめようと思いました。

WordPressの基本テーマ twentyシリーズを調べる

WordPressをインストールしたときにデフォルトで入っているテーマを元に調べました。

■Twenty Twenty

html
_head
_body
__header
__main
__footer
_/body
/html

全体が
htmlでくくってあり、その中に
head
body
があります。

今まで当たり前のように、もともとあるものを使用していましたがより深く理解します。

はじめにあるコメント「!DOCTYPE html」は?

一番はじめに
!DOCTYPE html
必ずあると思われますが、DOCTYPE宣言と呼ばれています。
この場合は「HTML5で作成されたものであることを宣言する」ということです。

ある場合とない場合ではブラウザやcssの挙動が異なる場合があるそうです。
参考:http://var.blog.jp/archives/48215012.html

htmlで全体を囲む

htmlで基本は全体を囲む必要があります。
WordPressでは共通のヘッダーと共通のフッターがあるので
headerに「html」
footerに「/html」と書かれていますのでページを開いたときには全てがhtmlの中に書かれています。

1:header.php 
2:(page.phpやsingle.php)
3:footer.php

【ここで疑問】
■htmlタグがない場合
htmlタグを省略する場合
■htmlタグが複数ある場合

meta charset=”utf-8″

Choromeのデベロッパーツールをまだ使ったことない方はぜひご利用ください。
初心者の方でも見ている、触るだけでも勉強になります。

WordPressで大量のメディア画像ファイルをまとめて削除する方法:データベースで

追記
なぜこのようなことをしたか「そもそも」を忘れてました。
メディアやFTP、ファイルマネージャーで画像を削除した場合に残骸が残っていたので
データベースを整理することからこの件を対応しました。
WordPressの管理画面メディアファイルを見るとからのデータが残っていたのが始まりです。
1:FTP、ファイルマネージャーで削除
2:残骸が気になったらphpMyadminで削除
※FTPよりファイルマネージャーのがすぐに削除できる。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

WordPressで大量の画像を管理していると、不要な画像がだんだんと増えサーバーの容量やデータ数が肥大していきます。
今回データベースをいじる機会があったので無駄な画像を整理しました。

半年か、年に一回のペースで整理するにあたり忘れないように書き留めておきます。

WordPressの過去記事をSQL文を使って一気に削除する方法

WordPressの過去記事をSQL文を使って一気に削除する方法

記事を一気に削除する=画像を削除するは同じなので初めてのかたはここを見て理解ができます。

例:2017年1月1日以前のデータを消す
DELETE FROM wp_posts WHERE `post_date` < '2017-01-01 00:00:00’

調べるのにまずは画像のデータがデータベースのどこに保存されているか調べました。

■wordpressで画像はどのようにデータベースに記録されているか

post_date 画像をアップロードした日時 2015-02-10 12:07:45
post_parent 親投稿(画像が使われている投稿のID) 1502
guid 画像のパス(URI) https://unskilled.site/wp-content/uploads/2015/02/1139150245147.jpg
post_type 種類 attachment
post_mime_type コンテンツタイプ image/jpeg or image/png

参考になるのをピックアップしましたが、一番需要だったのがattachmentでした。
(何が重要かは各々の目的で異なります。)

データベースの画像はどこ?画像データはpostsにある!

メディアファイル、画像のデータはpostsの中にあることがわかりました。
ここには記事のデータもあるので、画像と記事が混ざって表示されています。

データの削除の仕方:phpMyAdminの使い方 › データの追加と取得

https://www.dbonline.jp/phpmyadmin/data/index4.html

DELETE FROM `personal`.`friend` WHERE `friend`.`id`= 3

初めは1ページに表示された画像を一括選択して一括削除しましたが時間がかかるのと、また同じ手間がでるので
小一時間ほど無心でやって、あ、これできない人だ(my self)と気付きやめました。

で、調べて削除する時にDELETE FROMとか使うそうなのでここから調べました。

【SQL】範囲指定ならコレで決まり!BETWEENでスマートに条件を絞ろう

【SQL】範囲指定ならコレで決まり!BETWEENでスマートに条件を絞ろう

SELECT * FROM user WHERE create_time BETWEEN ‘2018-01-01 00:00:00’ AND ‘2018-03-01 00:00:00’;

BETEENの後にANDを中間において年月日を書けば良いそうです。
これは何月の画像を全て削除したいとした場合につかいました。

SELECT * FROM `OXg_posts`. WHERE create_time BETWEEN ‘2018-01-01 00:00:00’ AND ‘2018-03-01 00:00:00’;

調べ方:検索で表示してみる
post_type like attachment これで画像のデータを表示します。
post_date BETWEEN (期間の選択) 対象の期間を今回は選択

実行するとどのような使い方をするか表示されれるので参考にします。
「SELECT * 」からはじまるコードがリストの上の方に表示されています。

SELECT * FROM `XXX_posts` WHERE `post_date` BETWEEN ‘2020-04-01 00:00:00.000000’ AND ‘2020-05-01 00:00:00.000000’ AND `post_type` LIKE ‘attachment’ ORDER BY `post_date` DESC

このコードがSQLで実行されているようです。
希望のデータを表示するのにこのコードが使われていると考えれば
削除するときは「SELECT * 」を「DELETE」にすることでできると考えられるので
SQLで下記を実行します

DELETE FROM `XXX_posts` WHERE `post_date` BETWEEN ‘2020-04-01 00:00:00.000000’ AND ‘2020-05-01 00:00:00.000000’ AND `post_type` LIKE ‘attachment’

(XXX_postsはデータベースによって変更する)

これで必要なデータを表示することができます。

一枚の画像をIDで探す
SELECT * FROM `OXg_posts` WHERE `OXg_posts`.`ID` = 503128;

一枚の画像をIDで削除
DELETE FROM `OXg_posts` WHERE `OXg_posts`.`ID` = 503128;

SELECT * FROM `OXg_posts` WHERE `OXg_posts`.`ID` = 503128;

CPT UI カスタム投稿でURLにカテゴリーを表示させる。パーマリンクの設定方法[タクソノミースラッグ]を追加する

Custom Post Type Permalinksをインストール。

カスタム投稿タイプとカスタムタクソノミーを作成
パーマリンクの変更

ゴール
http://○○○○○.com/投稿タイプ名/カスタムタクソノミーのターム名(カテゴリー親子)/post_id/postname/

追加プラグイン
Custom Post Type Permalinks

タクソノミーのスラッグを追加

http://○○○○○.com/投稿タイプ名/post_id/postname/

パーマリンクを変更
%タクソノミースラッグ%
http://○○○○○.com/投稿タイプ名/%タクソノミースラッグ%/%post_id%/%postname%/

PageSpeed Insights [100点]達成!したのは、インストール直後のサイトでした。

WordPressをインストールした直後のPageSpeed Insights を調べてみました。
当然といえばなのですが100点です。

メインのサイトはいろいろいじりすぎて、改善に苦労するので新しいサイトを作るにあたり
まっさらから、ちょこちょこ計測しながら試してみようと思っています。

AMPも考えているんだが。。。。。。あまりいい思い出がないので
いい思い出になるように挑戦もしてみます。

WordPress テーマ厳選7+:初心者にオススメのWordPressテーマ(無料・有料) Japanese Theme

WordPressは自分で簡単にカスタマイズできるのがとても魅力ですね。
もちろん、カスタムできるほどの知識がない方でも、豊富なテンプレートから(無料、有料)
探すことができるので、制作会社いらずで
ホームページがモテます。

初めはコンテンツを作るのに集中して
おいおいデザインや管理画面にこだっていけばいいと思います。

こんかいはオススメの無料のテーマと有料のテーマをご紹介します。

[動画背景 15個の動画]WordPressに動画を背景に埋め込み、上にテキストを表示させる。映像を背景に!

Main

This video is sample.

Top1

This video is sample.

Top2

This video is sample.


Title1

This video is sample.

Title2

This video is sample.

Title3

This video is sample.

Title4

This video is sample.

Title5

This video is sample.

Title6

This video is sample.


Title7

This video is sample.

Title8

This video is sample.

Title9

This video is sample.


Title10

This video is sample.

Title11

This video is sample.

Title12

This video is sample.

[動画背景]Wordpressに動画を背景に埋め込み、上にテキストを表示させる。映像を背景に!
動画背景て重いけどかっこいいからサンプルで作ってみよう!

BMWのサイトで背景に動画をたくさん使ったトップページがあってカッコ良かったのでためしてみました。

【未解決】wp_XXXX table is not okay. It is reporting the following error

The wp_users table is not okay. It is reporting the following error: 1 client is using or hasn’t closed the table properly. WordPress will attempt to repair this table…
Failed to repair the wp_users table. Error: 1 client is using or hasn’t closed the table properly

The wp_usermeta table is not okay. It is reporting the following error: 2 clients are using or haven’t closed the table properly. WordPress will attempt to repair this table…
Failed to repair the wp_usermeta table. Error: 2 clients are using or haven’t closed the table properly

The wp_posts table is not okay. It is reporting the following error: 2 clients are using or haven’t closed the table properly. WordPress will attempt to repair this table…
Failed to repair the wp_posts table. Error: 2 clients are using or haven’t closed the table properly

The wp_comments table is not okay. It is reporting the following error: 1 client is using or hasn’t closed the table properly. WordPress will attempt to repair this table…
Failed to repair the wp_comments table. Error: 1 client is using or hasn’t closed the table properly

The wp_links table is okay.

The wp_options table is not okay. It is reporting the following error: Table is marked as crashed. WordPress will attempt to repair this table…
Failed to repair the wp_options table. Error: Table is marked as crashed

The wp_postmeta table is not okay. It is reporting the following error: 2 clients are using or haven’t closed the table properly. WordPress will attempt to repair this table…
Failed to repair the wp_postmeta table. Error: 2 clients are using or haven’t closed the table properly

The wp_terms table is not okay. It is reporting the following error: 1 client is using or hasn’t closed the table properly. WordPress will attempt to repair this table…
Failed to repair the wp_terms table. Error: 1 client is using or hasn’t closed the table properly

The wp_term_taxonomy table is not okay. It is reporting the following error: 2 clients are using or haven’t closed the table properly. WordPress will attempt to repair this table…
Failed to repair the wp_term_taxonomy table. Error: 2 clients are using or haven’t closed the table properly

The wp_term_relationships table is not okay. It is reporting the following error: 2 clients are using or haven’t closed the table properly. WordPress will attempt to repair this table…
Failed to repair the wp_term_relationships table. Error: 2 clients are using or haven’t closed the table properly

The wp_termmeta table is okay.

The wp_commentmeta table is not okay. It is reporting the following error: 1 client is using or hasn’t closed the table properly. WordPress will attempt to repair this table…
Failed to repair the wp_commentmeta table. Error: 1 client is using or hasn’t closed the table properly

Some database problems could not be repaired. Please copy-and-paste the following list of errors to the WordPress support forums to get additional assistance.

wp_users: 1 client is using or hasn’t closed the table properly
wp_usermeta: 2 clients are using or haven’t closed the table properly
wp_posts: 2 clients are using or haven’t closed the table properly
wp_comments: 1 client is using or hasn’t closed the table properly
wp_options: Table is marked as crashed
wp_postmeta: 2 clients are using or haven’t closed the table properly
wp_terms: 1 client is using or hasn’t closed the table properly
wp_term_taxonomy: 2 clients are using or haven’t closed the table properly
wp_term_relationships: 2 clients are using or haven’t closed the table properly
wp_commentmeta: 1 client is using or hasn’t closed the table properly

wp-config.php を編集
define(‘WP_ALLOW_REPAIR’, true);