wordpressサイト立ち上げの覚書です。
※この記事には、当サイト固有の情報が多いです
Tipsというわけではなく、修正点や気が付いた事柄をとめどなく書き溜めています。自分で作ったサイトというものは、なかなか思うような完成度にたどり着きません。この記事は事象が発生したら常に追加・更新します。
- プラグインAkismet 現在商用利用は有料
- htmlのコメントアウトに<!– –>を使うと、?php展開で勝手にコメントアウトされた場合に重なって不具合生じる。
- レスポンシブ対応 style.css 上部に
@media screen and (min-width: ｘｘｘpx) { #main { width: ｙｙｙpx; float: none; margin-left: auto; margin-right: auto; } }を各パターン挿入
- カテゴリウィジェットのリンク順位
- category-slug.php
- category-6.php
- category.php
- archive.php
- index.php の順なので、今回はsingle.phpからarchive.phpを作った
- ＴＯＰメニューの下が開く→#mainのpadding-bottom値がおかしかった
- カテゴリリストの書式→function.phpで指定
- 投稿の画像は左寄せ（２段組向け）
- テーブルのカラムの高さ調整→表や行でなくセルの高さで調整
- 投稿２段組の画像２連続すると二枚目がずれる→.alignnono{float: left;}で強制
- タグウイジェット文字等の設定→function.phpに
// タグクラウドの設定 function my_tag_cloud_filter($args) { $myargs = array( 'smallest' => 10, // 最小のフォントサイズ：8[デ] 'largest' => 13, // 最大のフォントサイズ：22[デ] 'unit' => 'px',// フォントサイズ単位：'pt'[デ] CSSで使用できる単位pt, px, em, % 'number' => 20, // 表示タグ数の上限：45[デ] ); $args = wp_parse_args($args, $myargs); return $args; } add_filter('widget_tag_cloud_args', 'my_tag_cloud_filter');を追加。これによってタブタイトルが消える→バグらしい→上記のようにreturnの前に$args=wp=parse-args($args,$myargs);を入れる
- Tiny MCE 文字のデフォルトを変える→tinymce-visual-editor.cssを作り
/*Tiny MCE advanced visual editor font setting*/ html .mceContentBody { font-family: 'コスギ丸ゴ', sans-serif !important ; font-size: 14px !important; }function.phpに下記を追加
add_editor_style('tinymce-visual-editor.css') - Tiny MCE 文字のデフォルトを変える（ブロックエディタ用）→editor_style.cssを作成し
/* エディター(ブロック)の幅 */ .wp-block { max-width: 680px; } body { color: #333; font-family: 'Kosugi Maru', sans-serif; font-size: 14px !important; } a { color: #e00f47; } a:hover { color: #ea4672; } p { margin-bottom: 30px; }funcsion.phpに下記を加える
function my_custom_editor_style() { // Gutenberg にエディター用のスタイルの適用をサポート add_theme_support( 'editor-styles' ); // テーマフォルダ直下の「css」フォルダにある "editor_style.css" を読み込む場合 add_editor_style( 'editor_style.css' ); } add_action( 'after_setup_theme','my_custom_editor_style' );その後クラッシックエディタの設定を削除
- 箇条書きフォントサイズ変える
.entry ul, .entry ol, .widget ul, .widget ol { margin: 20px 0 20px 20px; list-style-position: inside; font-size: 80%; }
- 製作終盤になってfirefoxのデベロッパーツール「Ｆ１２」の存在を知る。激便利！！
- h1～h6はコスギ丸ゴシックとした
h1,h2,h3,h4,h5,h6 { font-family: 'Kosugi Maru', sans-serif; }
基本フォントはbodyにてヒラギノ角を指定・・・後日取りやめ、TinyMCE設定で「editor_style.css」を作成し、functions.phpにて指定することにした
追加 2020/01/11
- フォントサイズ指定がなんかうまくいかない
調べるとstyle.cssのCSSリセットの項に入れていたため、各ブロックのフォントサイズの調整が上書き出来なかったようだ。
html,
body,
div,
span,
・
・
・
audio,
video {
border: 0;
/* font-family: 'Kosugi Maru', sans-serif; */
font-size: 16px; ←これ
vertical-align: baseline;
margin: 0;
padding: 0
}これを個別設定にし、各class/id/タグに挿入しました。指定は当然「em」です。
- 例1 トップページの会社説明文・・・「.style」
- 例2 パンくずリスト・・・「.breadclumbs」
- 例3 投稿本文・・・「.entry-content」
- 例4 見出しh3・・・「h3」
- 例5 テーブル内・・・該当ページの表の中で指定
- サイドバーのカテゴリリストの親のマージンがおかしい
「#sidebar-container 」でmarginをリセットしleftのみ再設定した
#sidebar-container .widget ul,
#sidebar-container .widget div {
margin: 0px; /* 一旦リセット */
margin-left: 3px;
font-size: 0.95em; /* 最近の投稿コンテンツ文字サイズ */
}
2020.05.09追加
- カスタム投稿タイプで「Gutenberg」を使う。プラグイン「Custom Post Type UI」でやっているので設定を変える。
- ダッシュボードのCPT UIを開く
- 投稿タイプの追加と編集項
- 投稿タイプの編集タブ
- 下のほうの「RESET API」項目をtrueにする
- 投稿のアーカイブに「続きを読む」にして短く表示させるには、記事中の該当部分にMoreTAG（下のアイコン）を挿入
