自宅のWindowsPCローカルにWordPressをインストールしている。
設定をいくつかやってみたので、備忘録としてまとめ。
※ メディアライブラリを使わない前提の設定まとめは以下。
１－Ａ．外観テーマを「Semplicemente」に変更。
テーマ「Semplicemente」は、一部カスタマイズをした。
- ［外観］＞［カスタマイズ］＞［ウィジェット］＞［サイドバー］で、「最近の投稿」と「最近のコメント」を削除。
- ［固定ページ］で、「サンプルページ」を削除。
- 記事一覧の「編集」と「続きを読む」を表示しないようにする。「\wp-content\themes\semplicemente\style.css」 の以下の部分を変更する。
footer.entry-footer { display: none; padding: 1.5em; border-top: 1px solid rgba(0,0,0,.05); } .entry-content { margin: 1.5em 0 1.5em 0; padding: 0 1.5em; }
１－Ｂ．外観テーマを「Iconic One」に変更。カスタマイズも。
その後、テーマを「Iconic One」に変更した。
※ カスタマイズをいくつか行っている。詳細は以下の記事参照。
２．外観 > カスタマイズ > ［追加CSS］へのCSS追加。
- アイキャッチ画像を記事本文内で表示しないようにする。
- 記事一覧の要約文をアイキャッチ画像の右に回り込ませる。
- ブログカードでショートコードを使用。
- ショートコードによるブログカードの画像を正方形にするためCSSを変更。
/* === テーマ「Iconic One」=== */
/* 記事一覧の要約を表示しない */
.entry-summary {
display: none;
}
/* 個別記事内でアイキャッチ画像非表示 */
.entry-featuredImg {
display: none;
}
/* 記事一覧のアイキャッチ画像を縮小して正方形に */
.entry-header img {
width:120px;
height:120px;
object-fit:cover;
margin-right:16px;
float:left;
}
/* === テーマ「Semplicemente」=== */
/* アイキャッチ画像非表示 */
.entry-featuredImg {
display: none;
}
/* 記事一覧の要約文をアイキャッチ画像の右に回り込ませる */
.entry-content > img {
width:120px;
height:120px;
object-fit:cover;
float: left;
margin-right: 14px;
}
/* === ブログカードでショートコードを使用 === */
a.nm-card {
border: 1px solid #e1e1e1;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
display: block;
padding: 20px;
position: relative;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
width: 100%;
text-decoration: none;
}
a.nm-card:hover {
box-shadow: none;
opacity: .8;
}
.nm-card-box {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.nm-card-title {
font-size: 18px;
font-weight: 600;
color: #428bca;
padding-bottom: 5px;
}
.nm-card-thumbnail {
flex: 1;
margin-right: 15px;
padding-top: 5px;
}
/* ブログカードの画像を正方形に */
.nm-card-thumbnail img {
width:120px;
height:120px;
object-fit:cover;
}
.nm-card-content {
flex: 2.5;
}
.nm-card-excerpt {
color: #808080;
font-size: 13px;
padding-bottom: 15px;
}
.nm-card-site {
border-top: dashed 1px #a4a4a4;
color: #b2b2b2;
font-size: 11px;
text-align:right;
padding-left: 5px;
}
.nm-card-site img {
margin-right: 5px;
vertical-align: bottom;
width: 20px;
}
@media (max-width: 980px) {
.nm-card-excerpt {
border: none;
}
}
@media (max-width: 640px) {
a.nm-card {
padding: 10px 10px 20px 10px;
}
.nm-card-thumbnail {
margin-right: 10px;
padding-top: 10px;
}
.nm-card-title {
font-size: 14px;
}
.nm-card-excerpt {
display: none;
}
}
３．「wp-content\themes\テーマフォルダ\content.php」
- 記事一覧にアイキャッチ画像を表示させる。（テーマ「Semplicemente」の場合）
「content.php」の以下の部分に、「the_post_thumbnail('thumbnail');」を追加する。
<div class="entry-content"> <?php the_post_thumbnail('thumbnail'); /* ！追加したアイキャッチ画像表示タグ */ ?> <?php the_excerpt(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'semplicemente' ), 'after' => '</div>', ) ); ?> </div><!-- .entry-content -->
４．「wp-content\themes\テーマフォルダ\functions.php」
- ブログカードでショートコードを使用。
- 余分なサイズの画像自動生成を停止する。
「functions.php」に以下のコードを追加。
//ブログカードのレイアウトを生成
function nm_create_blogcard_layout($url, $title, $excerpt, $image_url, $site, $prefix) {
return '<a href="'. $url .'" class="'. $prefix .'-card" target="_blank" rel="noopener noreferrer">' .
'<div class="'. $prefix .'-card-box">' .
'<div class="'. $prefix .'-card-thumbnail">' .
'<img src="' . $image_url . '" alt="' . $title . '"/>' .
'</div>' .
'<div class="'. $prefix .'-card-content">' .
'<div class="'. $prefix .'-card-title">'. $title .' </div>' .
'<div class="'. $prefix .'-card-excerpt">'. $excerpt .'</div>' .
'<div class="'. $prefix .'-card-site">'. $site .'</div>' .
'</div>' .
'</div>' .
'</a>';
}
//記事の文章を抜粋して取得する
function nm_get_excerpt_post( $post_id, $length = 55 ) {
//指定された投稿を取得
$post = get_post( $post_id );
//投稿からショートコードを削除
$post_non_code_content = strip_shortcodes( $post->post_content );
//指定した文字列文返却する
return wp_trim_words($post_non_code_content, $length);
}
//ショートコード
function nm_create_blogcard($atts) {
//imageがない場合の画像の設定
$no_image = "";
//エラーになった時の文字を指定しておく
$err_msg = "<p>ブログカード取得失敗</p>";
//初期値を設定して連想配列($atts)を変数($url, $title, $excerpt)に変換
extract(shortcode_atts(array('url'=>"", 'title'=>"", 'excerpt'=>"", 'length'=>55, 'image_url'=>"", 'site'=>"", 'prefix'=>"nm" ), $atts));
//エラーチェック(urlが空の場合) エラー表示
if (empty($url)) return $err_msg;
//urlからpostIDを取得
$post_id = url_to_postid($url);
//タイトルの取得(title未設定の場合)
if (empty($title)) $title = esc_html(get_the_title($post_id));
//記事の抜粋
if (empty($excerpt)) $excerpt = esc_html(nm_get_excerpt_post($post_id, $length));
//指定イメージがない場合、アイキャッチ画像を取得する
if (empty($image_url)) {
//アイキャッチ存在チェック
if (has_post_thumbnail($post_id)) {
//アイキャッチ取得
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post_id),'medium');
$image_url = $image[0];
} else {
$image_url = $no_image;
}
}
if (empty($site)) $site = $url;
//ブログカードのレイアウトを作成
$blogcard = nm_create_blogcard_layout($url, $title, $excerpt, $image_url, $site, $prefix);
//ショートコードを呼び出したところに挿入する場合、returnで返す。
return $blogcard;
}
add_shortcode("nmblogcard", "nm_create_blogcard");
「functions.php」の以下の行をコメントアウトする。
// add_image_size( 'normal-post' , 720, 9999);
５．余分なサイズの画像自動生成を停止する。
以下の設定をする。
６．プラグインツールの追加。
99．【番外編】WordPressのデータベース変更。
「wp-config.php」ファイルの「DB_NAME」を変更する。
\xampp\htdocs\wordpress\wp-config.php
/** WordPress のためのデータベース名 */ define('DB_NAME', 'wp_test'); /** MySQL データベースのユーザー名 */ define('DB_USER', 'root'); /** MySQL データベースのパスワード */ define('DB_PASSWORD', '*****');
