グーテンベルクのブロックのスタイルが効かない

獅子魂、cocowa,五十嵐商店、石浦家具、キワ科学、宮城工務店、サンエツのグーテンベルク右サイドにある、ブロック内の文字用のスタイルカラーが選択しても色が変わらない。

エネルゲン人のアーカーイブとチャンスメーカーは大丈夫。エネル原人のfunctions.phpを獅子魂にコピーしたら正常化した。多分、wpのアップデートに伴ってスタイルが効かないテーマのfunctions.phpと何かしらの問題があるようだ。

獅子魂、cocowa,五十嵐商店、石浦家具、宮城工務店、サンエツのfunctions.phpはエネルゲン人のアーカイブのfunctions.phpで上書きして直したが、キワ科学のだけは管理画面上は色が変わるのだが、サイト上ではなぜか変わらない!。クラシックエディタでは大丈夫。意味ふめい

テキストの一部分だけ色を変えたい場合

テキストを部分的に装飾したい場合

Gutenbergは仕様上、段落ブロック内のテキストを部分的に装飾(文字色・背景色・サイズ変更)することが出来ません。

しかし、方法が無いわけじゃありません。もし部分的にテキストを装飾したい場合は段落ブロックではなく「クラシック」ブロックを使いましょう。

「クラシック」ブロックは旧エディターを部分的に挿入するブロックですね。

「クラシック」ブロックはそのまま「クラシック」という名称です。

クラシックブロック

クラシックブロックを追加すると、テキスト上部に旧エディターの各種アイコンが表示されます。

クラシックブロック

[aside type=”warning”]上記は「TinyMCE Advanced」プラグインを有効化&設定した状態です。デフォルト状態だと表示されていないアイコンや項目もある可能性があります。[/aside]

ここから部分的な文字サイズの変更や装飾が可能です。

例えば部分的にテキストサイズを変更したい場合はテキストを選択肢、文字サイズを変更ですね。

部分的な文字装飾

このあたりは旧エディターを使い慣れている方は迷わないでしょう。例えば12pxから18pxに変更すると・・・

このように一部だけ文字サイズを変更出来ます。

部分的な文字装飾

同じ手順で部分的な文字色の変更・背景色の変更も可能なので、文章の一部だけ文字色や背景色を変えたい・・・という場合もクラシックブロックを使うと良いですね。

固定ページを紐づけたいが、ページ属性個所にテンプレートがない

https://oneuro.net/wp-how-to-setting-custom-template

ページ属性のところを調べていたが、仕様がかわったようで、上部の テンプレート投下所から紐づける


固定ページのページ属性のテンプレートが表示されません。


【当該サイトのURL】localで制作中です。### 実現したいこと固定ページのページ属性のテンプレートを設定したいです。### 発生している問題固定ページのページ属性のテンプレートが表示されません。

ブロックエディターの場合、ページ属性の中ではなくてもっと上のところにある「テンプレート」から変更できます。(デフォルトだと「デフォルトテンプレート」というテンプレートが選択されています)

固定ページの作り方

https://junpei-sugiyama.com/wordpress-original-theme-4/

固定ページの作り方は2つあります。

  1. テンプレートをページごとに作成(page-〇〇.php)
  2. 固定ページの編集画面でテキストエディタに直書き(page.php)

このどちらかになります。

管理画面の固定ページから各ページを新規追加するのは共通です。

テンプレートをページごとに作成

この場合は固定ページの数だけ『page-〇〇.php』というテンプレートを作る必要があります。

例えば『会社概要・お問い合わせ・採用情報』の3ページであれば、

  • page-company.php
  • page-contact.php
  • page-recruit.php

という感じになります(〇〇の部分は任意です)

コンテンツ(HTMLに書いたコード)は各テンプレートに書きます。

固定ページ → 新規追加で作成したページには何も書きません。

固定ページの編集画面でテキストエディタに直書き

この場合テンプレートは『page.php』の1つだけで大丈夫です。

こちらは『固定ページ → 新規追加』で作成したページに、それぞれのコンテンツを書きます。

HTMLのコードをそのままコピペに近いです。

どちらの方法で作るか?

ページごとにテンプレート作成

・テンプレート(phpファイル)にコードを書く

・固定ページの編集画面には何も書かない

OR

固定ページの編集画面に直書き

・テンプレート(phpファイル)には書かない(※)
・固定ページの編集画面にコードを書く(HTMLをコピペ)

※ テンプレートには書かないと書きましたが、固定ページの編集画面に書いたコードを呼び出すコードやヘッダー、フッターなどの共通部分を読み込むコードは書きます(コンテンツは書かないという意味です)

どちらの方法で作るかは人によって違うと思いますが、前者のページごとにテンプレートを作成した方が修正がしやすいので、私は特に指定がない限りこの方法で作成しています(『こちらの方法で』など指定されたことはありません)

後者の場合、固定ページ編集画面のテキストエディタにコードをコピペするのですが、後から編集しようとすると非常に見にくいです(やってみると分かると思います)

という事で、ページごとにテンプレートを作成する方法を中心に解説していきます。

固定ページの作り方①:ページごとにテンプレートを作成

まずは管理画面左側の『固定ページ → 新規追加』をクリックします。

WordPress管理画面:固定ページ → 新規追加

WordPress管理画面:固定ページ → 新規追加

すると次のような画面になるので、名前は何でも構いませんが今回は『HOME』とタイトルを付けて右の方にある『公開』ボタンをクリックします(プラグインのClassic Editorを適用しています)

WordPress固定ページ編集画面:タイトル入力

WordPress固定ページ編集画面:タイトル入力

タイトルの下の方にある中身(ビジュアルエディタ、テキストエディタ)は何も書かなくて大丈夫です。

これがトップページになります。

ついでに記事一覧ページ用に『BLOG』という固定ページも同様に作っておきます。

これでこの状態になります。

WordPress管理画面:固定ページ2つ作成

WordPress管理画面:固定ページ2つ作成

そしてトップページを『HOME』、記事一覧ページを『BLOG』とするために、管理画面左側の『設定 → 表示設定』を開きます。

WordPress管理画面:設定 → 表示設定

WordPress管理画面:設定 → 表示設定

次にホームページの表示を『最新の投稿』ではなく『固定ページ』を選択して、以下のように設定します。

  • ホームページ → HOME
  • 投稿ページ → BLOG

WordPress管理画面:表示設定

WordPress管理画面:表示設定

ちなみに今回トップページである『HOME』はfront-page.phpで、記事一覧ページである『BLOG』はhome.phpとなります(home.phpがない場合はindex.phpが記事一覧となります)

あとは1ページに表示したい最大投稿数も設定しておきます。

最大投稿数はテンプレート側で設定することも可能で、その場合はページネーションの関係で1にしておいた方がいいです(ちょっと難しい話なので一旦後回しでOKです)

また、ローカル環境では検索エンジンは関係ありませんが、テストサーバーにアップした時は『検索エンジンがサイトをインデックスしないようにする』にチェックを入れた方がいいので、ここでチェックを入れてしまってもOKです。

本番サーバーに移行して公開する時にはチェックを外すのを忘れないようにしましょう!

注意ポイント

検索エンジンでの表示にチェックを入れないと、サーバーにアップした時点でサイトが公開されてしまいます。

ここまで設定が出来たら下の『変更を保存』をクリックします。

そしてもう一度固定ページ一覧を見ると『HOME』がフロントページ、『BLOG』が投稿ページに設定されたのが分かります。

WordPress固定ページ:フロントページと投稿ページ設定完了

WordPress固定ページ:フロントページと投稿ページ設定完了

各固定ページのテンプレートを作成

次は固定ページのテンプレートを作成します。

これはページの数だけ必要になります。

最初の方でも書きましたが、例えば『会社概要・お問い合わせ・採用情報』の3ページあれば以下のようになります。

  • page-company.php
  • page-contact.php
  • page-recruit.php

前回トップページ編ではトップページはこのようになりました。

<?php get_header(); ?>
<main>
  <h1>大見出し</h1>
  <section>
    <h2>コンセプト</h2>
    <div>
       <img src="<?php echo get_theme_file_uri( '画像パス' ); ?>" alt="" />
    </div>
    <p>文章が入ります</p>
  </section>
</main>
<?php get_footer(); ?>

固定ページも同様にHTMLをまるっとコピペした後『header.php』と『footer.php』の部分は削除して、ヘッダーとフッターを読み込みます。

ただし、上記トップページ(front-page.php)とは異なる点があります。

固定ページ(page-◯◯.php)ではこのようになります(会社概要の場合)

<?php
/*
Template Name: 会社概要
*/
get_header();
?>
<main>
  <h1>大見出し</h1>
  <section>
    <h2>コンセプト</h2>
    <div>
      <img src="<?php echo get_theme_file_uri( '画像パス' ); ?>" alt="" />
    </div>
    <p>文章が入ります</p>
  </section>
</main>
<?php get_footer(); ?>

ヘッダーを読み込む所に『Template Name』があります。

これはテンプレートの名前を設定する所で、上記は会社概要ページなので『会社概要』と名付けました(これは『page-company.php』です)

これで管理画面の固定ページ編集画面から『会社概要』というテンプレートを選択できる様になりました。

同様に『お問い合わせ』『採用情報』を作ります。

また記事一覧は『home.php』で作りましたが、これは『Template Name』は書かなくてOKです(page-◯◯.phpではないので)

記事一覧ページの作り方は以下の記事を参照下さい。

アイキャッチに登録されていないときに、あらかじめ画像を表示する方法

<?php if (has_post_thumbnail()) : ?>
  <?php the_post_thumbnail(); ?>
<?php else: ?>
  <img src="<?php echo get_template_directory_uri(); ?>/代わりの画像までのパス" alt="">
<?php endif; ?>

獅子魂での設定↓

	<div class="col-md-4 mb-3 text-center thumbContainer">
			<!-- 入力がある場合に表示させる -->
			<?php if (has_post_thumbnail()) : /* もしアイキャッチが登録されていたら */ ?>
  				<?php the_post_thumbnail(); ?>
				<?php else: /* 登録されていなかったら */ ?>
				<img src="<?php echo get_template_directory_uri(); ?>/noimg_big.jpg" class="img-fluid" alt="">
  			<?php endif; ?>
	</div>

カテゴリーをカテゴリ別に一覧表示するさいに、スタイルを各々別にするには

shishikonのindex.php

カテゴリ別に区別するために、条件設定をした。

これ参考

 https://works.coldsleep.jp/blog/category-custom/

まずは、カテゴリーごとに変えたい部分が少ないとき。これはテンプレートにin_category()で条件分岐を作って表示を切り替えればOKです。in_category()のパラメーターにはカテゴリーのIDまたはslugを指定します。

カテゴリーIDの調べ方はWordPressの管理画面のカテゴリー管理の画面で調べたいカテゴリーにマウスオンするとブラウザの左下に次のようなアドレスが表示されます。その中のID=“○○”の数字がカテゴリーIDです。

カテゴリー管理画面でIDは確認できます。

カテゴリーIDがわかったところで、テンプレートに書くコードは次のようになります。

<?php if (in_category(1)) : ?>
  <p>パターン青です。</p>
<?php else : ?>
  <p>パターン赤です。</p>
<?php endif; ?>

index.php ↓

因みに、info はカテゴリとしてインフォメーション用のスラッグ。info以外は、別カテゴリの中を取得して表示させるように設定。

<!--カテゴリだけ出力-->
<!--informationの時だけ-->
<?php if(is_category(info)): ?>
		
	<div class="ichiran">information topics</div>
		
 <!--ループ処理-->
<?php if(have_posts()): while(have_posts()):the_post(); ?>
	

<!--記事コンテナ-->
<div class="post">
<!--個別ページURL & ループ内で取得したタイトル表示-->
<h3><a href="<?php the_permalink();?>"><?php  the_title(); ?></a></h3>

<div class="postinfo">
<!--記事の投稿日 投稿時間 記事が属するカテゴリ-->
<p><?php the_date(); ?> 
|
<?php the_category(','); ?>
</p>
</div>
</div>
		
<?php endwhile; endif; ?>
<!--ループ処理END-->
		
<?php endif; ?>
		
		
		
<!--カテゴリだけ出力-->
<!--information以外の時だけ 団体ボックス-->
<?php if(is_category(array('dantai-ichiran','kamiichi-cat','nyuzenmachi-cat','nyuzenmachi-cat','irifunemura-cat','nantoshi-cat','toyamashi-cat','imizushi-cat','oyabeshi-cat','asahimachi-cat','himishi-cat','namerikawashi-cat','tonamishi-cat','tateyamamachi-cat','takaokashi-cat','uozushi-cat','kurobeshi-cat',))): ?>		

<p id="pagetitle"><?php single_cat_title(); ?></p>
<div id="cate-descript"><?php echo category_description(); ?></div>
		
 <!--ループ処理-->
<?php if(have_posts()): while(have_posts()):the_post(); ?>	
		
<!--記事コンテナ-->
<div class="post">		

		
<div class="row ichiranBox">
	

	
	<div class="col-md-4 mb-3">
			<!-- 入力がある場合に表示させる -->
			<?php $value = get_field('dantaiphoto') ; if(empty($value)) : else:?> 
			<div class="mb-3 text-center">
			<img src="<?php the_field('dantaiphoto'); ?>" class="img-fluid">
			</div>
	   		<?php endif;?>	
	</div>
	
	
	
	<div class="col-md-8 mb-3">
		
			<!--ページURL & ループ内で取得したタイトル表示-->
			<h3 class="pb-2"><a href="<?php the_permalink();?>"><?php  the_title(); ?></a></h3>
			
			<div class="table-responsive">
  			<table class="table table-bordered ">
			<tbody>
					
					
				<!-- 入力がある場合に表示させる -->
				<?php $value = get_field('dantaimei') ; if(empty($value)) : else:?>  
    			<tr>
     			<td class="th1 ">団体名</td>
      			<td class="td1"><?php the_field('dantaimei')?></td>
    			</tr>
				<?php endif;?>	

	  	  	  
	  
				<!-- 入力がある場合に表示させる -->
				<?php $value = get_field('kaisainichiji') ; if(empty($value)) : else:?>  	  
    			<tr>
      			<td class="th1 ">開催日時</td>
				<td class="td1"><?php the_field('kaisainichiji')?></td>
    			</tr>
				<?php endif;?>	 	  
	  
	  
	  
	  
				<!-- 入力がある場合に表示させる -->
				<?php $value = get_field('kaijyou') ; if(empty($value)) : else:?>  	  
    			<tr>
      			<td class="th1 ">主な活動場所(会場)</td>
				<td class="td1"><?php the_field('kaijyou')?></td>
    			</tr>
				<?php endif;?>	
  

					
					
				<!-- 入力がある場合に表示させる -->
				<?php $value = get_field('ninzu') ; if(empty($value)) : else:?>  	  
    			<tr>
      			<td class="th1 ">構成人数</td>
				<td class="td1"><?php the_field('ninzu')?></td>
    			</tr>
				<?php endif;?>						
					
	
	
			</tbody>
			</table>
			</div>
	</div>
	
</div>				
</div>		
		
		
 <?php endwhile; endif; ?>
 <!--ループ処理END-->		
		

<?php endif; ?>

WordPressでコーポレートサイトなどを制作する際、特定のカテゴリーだけページの見せ方を変えたいってことありますよね。そこで、今回は特定のカテゴリーの表示をカスタマイズする方法を紹介します。

やり方はいろいろありますが、よく使う3つの方法を紹介します。

  1. ページ内の一部の表示だけ変える
  2. カテゴリーごとに表示するテンプレートを変える(1)
  3. カテゴリーごとに表示するテンプレートを変える(2)

ページ内の一部の表示だけ変える

まずは、カテゴリーごとに変えたい部分が少ないとき。これはテンプレートにin_category()で条件分岐を作って表示を切り替えればOKです。in_category()のパラメーターにはカテゴリーのIDまたはslugを指定します。

カテゴリーIDの調べ方はWordPressの管理画面のカテゴリー管理の画面で調べたいカテゴリーにマウスオンするとブラウザの左下に次のようなアドレスが表示されます。その中のID=“○○”の数字がカテゴリーIDです。

カテゴリー管理画面でIDは確認できます。

カテゴリーIDがわかったところで、テンプレートに書くコードは次のようになります。<?php if (in_category(1)) : ?> <p>パターン青です。</p> <?php else : ?> <p>パターン赤です。</p> <?php endif; ?>

PHP

条件分岐が増える場合は<?php if (in_category(1)) : ?> <p>パターン青です。</p> <?php elseif (in_category(2)) : ?> <p>パターン赤です。 <?php else : ?> <p>パターン青でも赤でもありません。</p> <?php endif; ?>

PHP

複数のカテゴリーを指定したい場合は<?php if (in_category(array('1','2'))) : ?> <p>パターン青と赤のときはこちらです。</p> <?php else : ?> <p>パターン青でも赤でもありません。</p> <?php endif; ?>

PHP

尚、この方法はカテゴリーだけでなく、投稿ページのテンプレートでも使えます。

カテゴリーごとに表示するテンプレートを変える(1)

お次は、カテゴリーごとに表示を切り替える内容が多い場合。切り替え方法はさっきと同じですが、それぞれ別のテンプレートを用意して表示するテンプレートを切り替えます。

category.phpを分岐される場合、まず新しいテンプレート(category1.php、category2.phpなど)を作ります。新しいテンプレートの中身は特別な記述はいりません。元のファイルを複製するのが簡単です。

次にcotegory.phpの中身を次のように書き換えます。<?php if ( in_category('1') ) { include(TEMPLATEPATH . '/category1.php'); } else { include(TEMPLATEPATH . '/category2.php'); } ?>

PHP

条件分岐が増える場合、複数のカテゴリーを指定する場合のやり方はさきほどと同じです。また、今回はテンプレートの中身をまるごと切り替えるようにしましたが、一部だけでも問題ありません。

尚、この方法はカテゴリーだけでなく、投稿ページのテンプレートでも使えます。

カテゴリーごとに表示するテンプレートを変える(2)

あれもこれもではなく、ある特定のカテゴリだけ表示を変えたいってことなら、実はもっと簡単にテンプレートを変える方法があります。それは、カスタマイズしたいカテゴリーのIDやslugを調べて、category-ID.phpやcategory-slug.phpを新規作成するという方法です。

WordPressのテンプレートは次のような優先順位になっています。

  1. category-slug.php
  2. category-ID.php
  3. category.php
  4. archive.php
  5. index.php

上からテンプレートを探しにいってなければ次のテンプレートを探すという流れになっています。なので、category–1.phpを追加すれば、カテゴリーIDが1のときはcategory–1.phpが表示されますが、その他のカテゴリーのときはcategory.phpが表示されるというわけです。

ただし、この方法はカテゴリーごとにテンプレートを作成しなければいけないので、複数のカテゴリーで固有のテンプレートを使おうとするとその数だけテンプレートを作成する必要があります。

尚、この方法は、固定ページでも有効です。

wordpressのサイドバーの 検索箇所のカスタマイズ

NEW獅子魂で実装

*検索フォームのテンプレート→「searchform.php」
*検索結果を表示させるテンプレート→「search.php」

style.cssにカスタム検索ボックスのcssを表記

Advanced Custom Fields(ACF)

cocowaや宮城工務店 獅子魂にて利用

【2023年最新版】Advanced Custom Fieldsの基本的な使い方を紹介します

” https://usagicode.com/wordpress/how-to-use-advanced-custom-fields/ “

<div class="table-responsive my-5">
  				<table class="table table-bordered ">
				<tbody>
					
					
				<!-- 入力がある場合に表示させる -->
				<?php $value = get_field('dantaimei') ; if(empty($value)) : else:?>  
    			<tr>
     			<td class="th1 ">団体名</td>
      			<td class="td1"><?php the_field('dantaimei')?></td>
    			</tr>
				<?php endif;?>	

	  
				
  
	  
	
			</tbody>
			</table>
			</div>

URL箇所について

リンクを貼ろうとして<a></a>で囲うと表示されなくなる。リンクは貼れない。

画像について

画像を設置するためのフィールドです。
WordPressのコンテンツエディタやアイキャッチとは別に画像を設置したい場合などに使います。

テキストフィールドなどと違い「返り値のフォーマット」を選択する必要があります。単純に画像を表示させたいだけの場合は「URL」を選択し、下記コードを記述すると画像が表示されます。

画像フィールド出力方法
// プロフィールページで設定した画像を表示させる例
<img src="<?php the_field('profile_image'); ?>" >


ACFの仕様が変更になり、iframeが表示されなくなった!

https://daily-report.strange-brain.co.jp/acf-6-2-7%E4%BB%A5%E9%99%8D%E3%81%A7%E3%81%AEhtml%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%AE%E4%BB%95%E6%A7%98%E5%A4%89%E6%9B%B4%E3%81%B8%E3%81%AE%E5%AF%BE%E5%BF%9C%E6%96%B9%E6%B3%95/

影響を受ける例②

ACFで記事ごとにGoogleMapの地図のiframeタグを入れられるようにしてる!

→iframeタグが除去されてしまうので表示されなくなってしまいます

【おすすめ】the_field()ではなくget_field()を利用する

アナウンスがあったのはthe_field() などのようにechoを伴わずとも出力が可能な関数に対してなので、get_field() などの本変更の対象ではない関数を利用するようにすると、これまで通りのかたちで出力されるようになります。

<?php 
  //ACF 6.2.7以降 the_field()はHTMLエスケープされる
  the_field('field_name');

  //HTMLエスケープなしで値をそのまま出力
  echo get_field('field_name');
?>

獅子魂のマップ箇所を下記のように変更 single.php

変更前↓
<?php the_field('map')?>


変更↓
<?php echo get_field('map')?>

ロリポップ WordPressインストール後に独自ドメインのURLへ変更する方法

https://lolipop.jp/manual/user/wordpress-install-domain/

https://hostingstock.net/article/lolipop_jp/change-wordpress-domain/

ULR変更方法やパーマリンク設定

https://www.onamae.com/column/wordpress/19/


獅子魂を引っ越しする際の手順

ロリポップの初期ドメインにて獅子魂用のwordpressをchancemakerロリポップにてインストールして、データーもアップして運用手前まで準備しておく。ロリポップはマルチドメイン利用可能なので、既にchancemake.co.jpとcm-creation.netが入っているが、ここにshishi-kon.comをいれる。準備用としてのURLは


http://chancemaker.chowder.jp/shishikon/

ルート下に獅子魂用のディレクトリを作り、獅子魂用のwordpressをインストールする



団体データー等の情報を全て準備用のワードレスにいれて準備が整ったらば、

ドメインのレジストリをムームドメインへ変更する。ムームードメインもマルチでドメインを管理している。茶谷さんにレジストリ変更お願いする。

ムームードメインにshishi-kon.comが移管したらば、ドメインに対して、ロリポップを紐づける設定をする。

今度は、ロリポップ側にて、独自ドメインとしてのshishi-kon.comを紐づける。公開フォルダは、ロリポップ初期ドメインで作っている獅子魂用のフォルダのshishikonを指定する。

shishi-kon.comをSSLに設定する。

ワードプレスの管理画面→設定にて、wordpressアドレス(URL)とサイトアドレス(URL)を 変更する 

https://www.shishi-kon.com

www忘れずに



WordPressのURL設定を間違えて変更し、ログインできなくなったときの対処法

https://libre-co.com/wordpress/wp-login-error/

WordPressの管理画面の一般設定では、WordPressアドレスとサイトアドレスを設定できますが、ここで記述をミスしてしまうと管理画面が404エラーになり、WordPressにログインできなくなってしまいます。

image

wp-config.phpを修正する

この方法では、WordPress構成ファイルのwp-config.phpを修正していきます。
なお、FTPアクセスかファイルマネージャーが必須です。

STEP01:wp-config.phpファイルをダウンロード

まず、FTPでWordPressをインストールしたところにある「wp-config.php」ファイルをローカルにダウンロードします。
このファイルは重要な構成ファイルですので、修正する前に念の為、オリジナルをコピーしていつでも元に戻せるようにしておきましょう!
FTPが使えない方は、レンタルしているサーバーの管理画面にログインして、ファイルマネージャー機能を使ってダウンロードできます。

STEP02:wp-config.phpファイルに加筆

下の2行を「wp-config.php」の一番最後に書き加えます。
URLの部分は適宜設定したいアドレスに変えてください。

update_option( 'siteurl', 'https://example.com' );
update_option( 'home', 'https://example.com' );

COPYコードを選択PHP

書き込む場所は、 require_once ABSPATH . ‘wp-settings.php’; と記載がある行より下にする必要があります。最終行にしておけば問題ありません。

加筆したら、wp-config.phpをアップロードします。

STEP03:WordPress管理画面にログイン

wp-config.phpの上書きが完了したら、WordPress管理画面にアクセスします。
先程設定したURLにwp-login.phpを追加したものが一般的なログイン画面のアドレスです!

例) https://example.com/wp-login.php

STEP04:wp-config.phpを元に戻す

無事にログインできたら、もうupdate_optionは必要ありませんので、wp-config.phpから削除してOKです。
今後は通常通り管理画面の一般設定から変更可能な状態に戻ります♪

Vidio Gallry 動画用ギャラリープラグイン

https://takuweb1.com/2020/03/24/video-gallery/

Video Galleryとは

WordPressで作成しているブログ記事に
ビデオのギャラリーを設置することができるプラグインです。
また、このビデオは自分で用意したものをアップロードできる上
YouTube , Vimeoの動画をURLで直接貼り付けることもできます。

wordpress投稿画面の上部に表示オプションが表示されなくなったのと、投稿下にあったカスタムフィールドがサイドバーに移ってしまい、投稿下に戻らなくなった

cocowaでそうなった。なぜか、▲ボタン押したらそうなった。PCの電源落としてキャッシュクリアしたら投稿下には通常通り戻って表示されたが、上部の表示オプションはでない。っていうか、localworkのwordpressの投稿画面でも上部に表示オプションが出なくなっている。

キャッシュの問題か?wordpressのバージョン問題か?でも、こうなる直前まで出ていたが。

twenty系やcocoonにテーマを替えても上部にでないので、wordpressの仕様が投稿では右上に表示オプションが出なくなったのでは?

wordpress カテゴリページ毎にカスタマイズ

https://www.torat.jp/wordpress-category-3/

https://securavita.net/category-design-custompost/

WordPressでコーポレートサイトなどを制作する際、特定のカテゴリーだけページの見せ方を変えたいってことありますよね。そこで、今回は特定のカテゴリーの表示をカスタマイズする方法を紹介します。

やり方はいろいろありますが、よく使う3つの方法を紹介します。

  1. ページ内の一部の表示だけ変える
  2. カテゴリーごとに表示するテンプレートを変える(1)
  3. カテゴリーごとに表示するテンプレートを変える(2)

ページ内の一部の表示だけ変える

まずは、カテゴリーごとに変えたい部分が少ないとき。これはテンプレートにin_category()で条件分岐を作って表示を切り替えればOKです。in_category()のパラメーターにはカテゴリーのIDまたはslugを指定します。

カテゴリーIDの調べ方はWordPressの管理画面のカテゴリー管理の画面で調べたいカテゴリーにマウスオンするとブラウザの左下に次のようなアドレスが表示されます。その中のID=“○○”の数字がカテゴリーIDです。

カテゴリー管理画面でIDは確認できます。

カテゴリーIDがわかったところで、テンプレートに書くコードは次のようになります。<?php if (in_category(1)) : ?> <p>パターン青です。</p> <?php else : ?> <p>パターン赤です。</p> <?php endif; ?>

PHP

条件分岐が増える場合は<?php if (in_category(1)) : ?> <p>パターン青です。</p> <?php elseif (in_category(2)) : ?> <p>パターン赤です。 <?php else : ?> <p>パターン青でも赤でもありません。</p> <?php endif; ?>

PHP

複数のカテゴリーを指定したい場合は<?php if (in_category(array('1','2'))) : ?> <p>パターン青と赤のときはこちらです。</p> <?php else : ?> <p>パターン青でも赤でもありません。</p> <?php endif; ?>

PHP

尚、この方法はカテゴリーだけでなく、投稿ページのテンプレートでも使えます。

カテゴリーごとに表示するテンプレートを変える(1)

お次は、カテゴリーごとに表示を切り替える内容が多い場合。切り替え方法はさっきと同じですが、それぞれ別のテンプレートを用意して表示するテンプレートを切り替えます。

category.phpを分岐される場合、まず新しいテンプレート(category1.php、category2.phpなど)を作ります。新しいテンプレートの中身は特別な記述はいりません。元のファイルを複製するのが簡単です。

次にcotegory.phpの中身を次のように書き換えます。<?php if ( in_category('1') ) { include(TEMPLATEPATH . '/category1.php'); } else { include(TEMPLATEPATH . '/category2.php'); } ?>

PHP

条件分岐が増える場合、複数のカテゴリーを指定する場合のやり方はさきほどと同じです。また、今回はテンプレートの中身をまるごと切り替えるようにしましたが、一部だけでも問題ありません。

尚、この方法はカテゴリーだけでなく、投稿ページのテンプレートでも使えます。

カテゴリーごとに表示するテンプレートを変える(2)

あれもこれもではなく、ある特定のカテゴリだけ表示を変えたいってことなら、実はもっと簡単にテンプレートを変える方法があります。それは、カスタマイズしたいカテゴリーのIDやslugを調べて、category-ID.phpやcategory-slug.phpを新規作成するという方法です。

WordPressのテンプレートは次のような優先順位になっています。

  1. category-slug.php
  2. category-ID.php
  3. category.php
  4. archive.php
  5. index.php

上からテンプレートを探しにいってなければ次のテンプレートを探すという流れになっています。なので、category–1.phpを追加すれば、カテゴリーIDが1のときはcategory–1.phpが表示されますが、その他のカテゴリーのときはcategory.phpが表示されるというわけです。

ただし、この方法はカテゴリーごとにテンプレートを作成しなければいけないので、複数のカテゴリーで固有のテンプレートを使おうとするとその数だけテンプレートを作成する必要があります。

尚、この方法は、固定ページでも有効です。

CocoonにBootstrap5を適用させる

https://www.imomushi-blog.com/cocoon-bootstrap/

Cocoon Childだと、head-insert.phpにbootstrap5用のコードをいれると、ページ内でレイアウトおかしくなる?

↑これ違った。原因は、
管理画面のCocoon設定→カラム→コンテンツ幅には何も指定しない方がよい。レイアウト崩れる。← そんなことないかも?1600と入れても大丈夫?

https://kgt-blog.com/bootstrap/3967/

WordPressでの利用方法

WordPressを利用してブログを運営している人が多いです。

これからWordPressでBootstrapを利用する方法を説明します。

WordPress管理画面の「外観 -> テーマエディター」をクリックしてください。
するとこのような画面が表示されます。

画面右側のテーマファイルにある「header.php」をクリックしてください。

「header.php」がない場合は画面右上の「編集するテーマを選択」より利用しているテーマに変更して確認してください。

※Cocoonを使用している場合は「Cocoon Child」ではなく「Cocoon」テーマで変更する必要があります。

↑違う!。Cocoon Childのhead-insert.phpでも大丈夫!!

「header.php」が表示できたら、<head>タグ内に上記の3行(もしくは5行)を記載して保存すれば完了です!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

管理画面のCocoon設定→カラム→コンテンツ幅には何も指定しない方がよい。レイアウト崩れる。← そんなことないかも?1600と入れても大丈夫

Cocoon wordpressのテーマエディタが外観の中にない。hederの中に記述したい場合もここで。

たぶんだけど、マルチサイトにしているからか、サイトネットワーク管理→テーマ→テーマファイルエディタ に行かないと表示されない。ダッシュボード内のテーマからでは表示されない。下記方法でも大丈夫

https://wp-cocoon.com/community/cocoon-theme/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E7%B7%A8%E9%9B%86%E3%81%AF%E3%81%A9%E3%81%93%E3%81%AB%E3%81%82%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B/

以下のようなURLで直接アクセスすると、ページを表示できますでしょうか?
h ttps://ドメイン/wp-admin/theme-editor.php
もし、上記のようなリンクでアクセスできる場合は、上記のブックマークを作成し、直接アクセスするという方法をとるしか今のところ対応策は思いつかないです。


https://nosubject.io/wordpress-cocoon-edit-header-tag/

Cocoon Child テーマを利用しています。Google Adsense のコードを<head>タグ内に入れる方法がわからなかったので調べました。

※追記:今だと設定画面で変更できるようになっているので、そちらについても記載しました。

設定方法

  • WordPressのダッシュボードで、外観→テーマエディタを開きます。
  • 右側のテーマファイルのリストから tmp-user → head-insert.php を選びます。
  • 一番下に <? //全ての訪問者をカウントする場合は以下に挿入 ?> という行があるので、その下に挿入したいコードを貼り付けます。
  • 画面下のファイルを更新 ボタンを押して完了です。

head-insert.phpの設定例

<?php
//ヘッダー部分(<head></head>内)にタグを挿入したいときは、このテンプレートに挿入(ヘッダーに挿入する解析タグなど)
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
//例:<script type="text/javascript">解析コード</script>
?>
<?php if (!is_user_administrator()) :
//管理者を除外してカウントする場合は以下に挿入 ?>

<?php endif; ?>
<?php //全ての訪問者をカウントする場合は以下に挿入 ?>
<script data-ad-client="ca-pub-XXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

追記

最近の Cocoon であれば、設定画面から追記できます。

Cocoon設定の 「アクセス解析・認証」タブを開きます。

画面をスクロールしていくと、「その他のアクセス解析・認証コード設定」というブロックがあるので、その中の「ヘッド用コード」に書くことで設定できます。

Cocoon ワードプレス

https://wp-cocoon.com/downloads/

カスタマイズするテーマはCocoon Childの方でする。親のCocoonの方だとアプデされるとカスタムが上書きされて消されるから。

ロゴ設定

https://ten-mina.com/cocoon-blog-header-logo/

ロゴ左寄せ

https://programming.sincoston.com/wordpress-cocoon-header-logo-left/

CSS設定

https://wp-cocoon.com/community/cocoon-theme/cocoon%E3%81%AEcss%E7%B7%A8%E9%9B%86%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

ナビゲーション設定

https://ikuzoblog.com/cocoon-globalnavigation

フッターロゴの大きさ

https://www.3wj.co.jp/cocoon-fix-a-size-of-footerlogo/

フッター編集

https://niikenchannel.com/?p=2311

スライドショー

https://design-formom.com/cocoon-slide-show/

タイトル非表示

https://fukappa.work/page-title-hidden/

固定ページの日付を非表示

https://kyuncomic.com/cocoon/date-non-representation

サイトの幅変更

https://ikuzoblog.com/global-navigation

横幅一杯に設定

https://gluttonir.com/full-width/

https://pasoviva.com/wordpress-fullcover/

子テーマのfunctions.phpに以下を追記すればできるかと思います。function get_main_column_padding(){
return 0;
}

バーガーメニュー

https://no-football-no-life.com/hamburger-menu/

https://design-formom.com/cocoon-hamburger-menu/

All-in-One-Event Calender カレンダー表示のプラグイン

プラグインをONにすると、管理画面左に、Time.lyのところから設定する

↑上記のEmbed Codeを固定ページのコードビューで埋め込まなくても、固定ページのphpページ内に、下記ショートコード記述でも大丈夫

<?php echo do_shortcode('[timely-calendar]'); ?>

日本語化パッチ

ファイルをプラグインのlanguageディレクトリに入れればOKです。

https://www.mediafire.com/?a0a8cb7a8hl9kym

https://lecture.blackdesign.jp/wordpress/1620

規定値の表示設定

settings→Designタブ→Views からPCとモバイル用として、月、週、アジェンダの3つの中から設定できる。

イベント編集

Eventsで、Publishedの中のListから、Titleにある該当イベントを選択する際に、Editとでるのでその個所選ぶ。

削除も同様

画像は大きさを設定する

マップコードは埋め込めない

マップへのリンクは張れる

Venueに住所いれても表示はされない


↑上記のようになってしまったらば、Embed CoadのURLが違うので、Settings→Emded Coadタブの Calender WedpageのURLを正しく変更する


https://iblab.net/all-in-one-event-calender/#index_id6

イベントの開催場所を地図で表示させるためには「Google Maps Platform」というビジネスアカウントの登録をして「Google Maps APIキー」を取得する必要があります。

「Google Maps Platform」は、地図へのアクセスに応じて課金されるシステムですが、1年間、月間200ドル(約22,000円)まで無料利用できます。

イベントの地図は、イベントの詳細欄にGoogle Mapのリンクを直接埋め込む方法もありますので、無理に「Google Maps APIキー」を取得する必要はありません。


http://cm-creation.net/yoshida/localwork/wp-content/uploads/2023/09/カレンダー設定方法.pdf

wordpressの投稿がパーマリンク構造にしたらページが見つかりませんとなった

まさはしFPより、下記問い合わせ

先日、ブログを、会員サロンで紹介する際

URLを短くしたい為

以前教えて頂いた

>編集画面 >パーマリンク

で入力しました。

そうしますと、当該記事がブログのページには表示されるのですが

手入力で修正後のURLですと、無地のページになります。

管理画面からパーマリンクの編集で変更したことが原因?

パーマリンクの設定をブログ記事を投稿した後に変更した場合も「ページが見つかりません」と言う表示が出てしまいます。

パーマリンクはブログを投稿し始めてにから変更すると急に不具合が起こることがあるそうです。

なので、「ページが見つかりません(404エラー)」というエラーが出た場合は、パーマリンク設定の確認をしてみましょう。

パーマリンク設定の確認方法

パーマリンク設定は、WordPressダッシュボードを表示させて、左側のメニューの設定をクリックするとあります。

パーマリンク設定の設定が開きますので、とりあえず、なにも変更せずに【変更を保存】をクリックしてください。

変更保存をしたら、ブログを表示させてみて記事が表示されるのかを確認してください。

もし、【変更を保存】で直らなかったら、パーマリンクを基本に戻してみましょう。

まず一つ目の対処法というのは、「パーマリンク設定」の確認になります。

カスタム構造でパーマリンク設定していたが、基本に再設定した。

sitemapとrobots.txt

Sitemap:

https://ichinosenanami.com/tec/2021/01/29/post-276/

sitemap.xml Editorで「指定したURLにアクセスできませんでした。」とエラーがでる

URLはちゃんと「/」で終わっているのですが。。。

試しに、このブログ 「https://ichinosenanami.com/tec/」を指定しても同じエラー。

どうやらレンタルサーバーロリポップ側がアクセスを拒否しているようです・・・。

ロリポップに確認したわけではないのですが、こうなってはどんなにがんばっても無理そうなので、別のツールで作成しました。

https://www.xml-sitemaps.com/

https://www.allegro-inc.com/search-times/xml-sitemap/#xml%E3%82%B5%E3%82%A4%E3%83%88%E3%83%9E%E3%83%83%E3%83%97%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E5%8A%B9%E6%9E%9C%E3%81%8C%E3%81%82%E3%82%8B

robots.txt

XMLサイトマップの場所をクローラーに伝えます。
GOOGLEに関しては、SEARCH CONSOLEでXMLサイトマップを登録していれば不要ですが、他の検索エンジンもあるので記述した方が良いでしょう。

User-Agent: *
Allow:
Sitemap: https://miyagi-koumuten.com/sitemap.xml

wordpressサイトのブラウザタブにタイトル名がダブルで表示される

ここwa

https://coco-wa.jp/cocowa-information/

タブにダブルで表示される。ここwaここwa って感じで。

原因はheader.phpに

<title><?php bloginfo('name');?><?php wp_title(); ?></title>

と記載しているのだが、これが all in one seoの機能によりダブルで表示されてしまうようだ。

<title><?php wp_title(); ?></title>

として <?php bloginfo(‘name’);?>をheader.phpから削るとよい

all in one seoを入れるなら上記のようにする必要がある。