https://translate.wordpress.org/locale/ja/default/wp-plugins/
NextGenGallery
https://haniwaman.com/nextgen-gallery/
https://haniwaman.com/nextgen-gallery/#index_id5
ギャラリーを作成してみる
Gallery → Add Gallery を開いてください。
ギャラリー名を入力して「ファイルを追加」からどんどんとファイルを追加していきましょう。
「アップロード」ボタンでWordPressへアップロードします。
進捗状況が出るので、とても親切です。
アップロード時に自動で圧縮もしてくれる優れもの。ちなみに画像がアップロードされる先は、/wp-content/galleryです。
ギャラリーを表示してみる
投稿ページか固定ページを開いてください。エディタの上部に「Add Gallery」ボタンが追加されていることが分かります。こちらをクリックしてください。
「Display Galleries」タブから、どの表示形式にするか選択できます。まずは一般的な、「NextGEN Basic Thumbnails」を選択して「Insert Displayed Gallert」で記事に挿入しましょう。
こんな感じのギャラリーページが出来上がりました!
「Show Slideshow」は文字通り、スライドショーとして表示を切り替えてくれるリンクです。
NextGEN Gallery の設定
Gallery → Gallery Settings を開いてください。個人的に重要だと思う設定だけまとめました。
画像のサイズ
画像は自動的にトリミングされて大きさが調整されるようになっています。サイズは、「Override thumbnail settings」から変更可能です。
- Override thumbnail settings → 画像のサイズを変更しますか?
- Thumbnail dimensions → サムネイルの大きさ
- Thumbnail crop → トリミングしますか?
サイズの大きさもトリミングの有無も変更可能です。ただし、画像のサイズが揃っていないと余白がありすぎる並びになってしまうので注意してください。
画像の表示枚数
「Images per page」で、ギャラリーの枚数の上限を設定できます。一画面にたくさん表示したい方はここの数字を大きくしましょう。
Show Slideshow のリンク
個人的にはあまり必要ないと思うので、削除しちゃいました。
「Show slideshow link」を「いいえ」にすることで表示されなくなります。
スライドショーの切り替わりスピード
標準は10秒で切り替わる設定になってますが、遅すぎます。なんの動きもないページにスクロールせずに10秒待ち続ける人がいるとは思えません。
3秒に設定を変更しました。
主要な設定は以上です。次はちょっと上級レベルなカスタマイズを見ていきます。
Gallery SettingsのBASIC THUMBNAILSの Enable AJAX pagenationは いいえ にしておく。はい にするとページネーション2ページ以降はLightBoxが効かなくなる! いいえ の状態にしておく。
WP jQuery Lightbox と組み合わせる方法
「NextGEN Gallery」は基本機能としてLightboxが組み込まれています。Lightboxとは、画像をクリックすると拡大表示してくれる機能ですね。
標準では「Fancybox」が使われているのですが、これをWordPressプラグイン「WP jQuery Lightbox」に変更することができます。
WP jQuery Lightbox をインストール
プラグイン → 新規追加 → キーワード「WP jQuery Lightbox」 → 今すぐインストール
インストールできたら、有効化してください。
設定 → jQuery Lightbox を開いてください。 「スクリーンサイズに合わせて画像を縮小」にチェックすることをお忘れなく!
「WP jQuery Lightbox」側の設定は以上です。
WP jQuery Lightboxを使うためのNextGEN Galleryの設定
Gallery → Other Options を開いてください。
「Lightbox Effects」のエリアを変更します。
- 「What effect would you like to use?」 → Custom
- 「Code」 → rel=”lightbox”
これで、ライトボックスが「WP jQuery Lightbox」に置き換わります。
カテゴリのスラッグと紐づけて、RSSフィードを取得できるコード これでトップページの新着一覧は表示できる!
柴田さんよりいただいた。
これは便利!!
<?php
$args = array(
'category_name' => 'info', //表示したいカテゴリー名を入力
'posts_per_page' => 10 //表示件数
);
?>
<?php $posts = get_posts($args); ?>
<?php foreach($posts as $post): ?>
<?php setup_postdata($post); ?>
<div class="col-12 col-xl-12 newsline pt-3">
<a href="<?php the_permalink(); ?>">
<p><?php the_time("Y.n.j") ; ?> <?php the_title(); ?></p>
</a>
</div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
獅子魂のpage-top.php
<div class="col-12 RssContainer mt-1">
<div id="rss">
<?php
$args = array(
'category_name' => 'info', //表示したいカテゴリー名を入力
'posts_per_page' => 10 //表示件数
);
?>
<?php $posts = get_posts($args); ?>
<?php foreach($posts as $post): ?>
<?php setup_postdata($post); ?>
<div class="col-12 col-xl-12 newsline pt-3">
<a href="<?php the_permalink(); ?>">
<p><?php the_time("Y.n.j") ; ?> <?php the_title(); ?></p>
</a>
</div>
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
スクロールバーの横スクロールを消す方法と、スクロールバーを細くする
横スクロールを消す方法
スクロール要素は縦のみで良いことが多いと思います。overflow: scroll;
で指定している方は横のスクロールバーも出てしまっているかもしれません。
そのような時はoverflow-y: scroll;
に変更すると縦スクロールのみ表示されるようになるでしょう。
RSSImport wordpressにrssfeedを組み込む
rssimportは開発中止になって、現在はプラグインがダウンロードできない。localworkにプラグイン先にあるので、使うときはそれダウンロードして利用する
「RSSImport」は、RSSフィードを読み込んでサイトに表示できるプラグインです。プラグイン自体の設定等は一切なく、投稿記事に直接ショートコードを記入するか、テンプレートにPHPコードを記載することで利用することができます。
RSSImportのプラグインを有効化することも忘れずに!
固定ページに埋め込む記述
tomiso-info/top-recommend.php
<?php echo do_shortcode(‘[RSSImport display=”10″ feedurl=”http://cm-creation.net/yoshida/localwork/tomiso-info/feed/” before_date=”</br><small>” date=”true” after_date=”</small> date_format=”y/m/d”]’); ?>
https://seo.yawatama.com/wp-seo_rssimport/
ショートコードを表示させる記述は下記を参照
WordPress管理画面の固定ページや投稿ページでショートコードを呼び出すときは、[]で呼び出すことができる。
1
|
[ショートコードの文字列] |
でも時々、テーマを自作している時、のPHPファイル内でショートコードを呼び出したい時もありますよね。
その時は、次のようにコードを書くと、ショートコードが実行されます。
簡単です!
1
|
<?php echo do_shortcode('[ショートコードの文字列]'); ?> |
カスタマイズ方法
https://seo.yawatama.com/wp-seo_rssimport-2/
RSSImport:RSSを取得し投稿・固定ページやテーマ等で表示できる
” https://tcd-theme.com/2014/08/rssimport.html “
下記のコードをテンプレート内のfunction.phpの一番最後の行に付け足しておきましょう。これで、キャッシュ時間を30分(1,800秒)に変更することができます。下記のコード内の「1800」の数値を変更することで、キャッシュ時間を調整することも可能です。
add_filter( ‘wp_feed_cache_transient_lifetime’, create_function( ‘$a’, ‘return 1800;’ ) );
add_filter( 'wp_feed_cache_transient_lifetime', create_function( '$a','return 60;'));
ロリポップ キャッシュクリア ロリポップアクセラレーター
柴田さんに聞いたが、テストサイトがやはりなかなかキャッシュクリアされなく、しばらく時間おくと反映されてるとのこと。サーバー側の問題っぽい。
https://lolipop.jp/manual/hp/content-cache/#about
https://lolipop.jp/manual/hp/content-cache/#settings-2
あと、ffftpでファイルはアップする
ロリポップアクセラレーター
https://lolipop.jp/manual/hp/content-cache/
ロリポップ!アクセラレータのキャッシュ削除方法キャッシュを削除したい場合は、キャッシュを削除したいドメインの『設定』を開いて『キャッシュ削除』ボタンをクリックします。完了するとボタンの隣に「キャッシュを削除しました」と表示されます。
反映までに最大5分間かかります。
『設定』ボタンはロリポップ!アクセラレータが有効時のみクリックできます。
mailformproのcsvのテキストエリアの項目がづれる
プレゼント企画で、エネルゲン人の新月の笛で、最後の項目値にある松岡さんへの 応援メッセージが、ところどころでセルの中に納まらずに改行されて別の行に挿入されている箇所がたくさんあった。何が原因かわからない。次回はデーター項目値を英語表記にして試してみる。まったく原因がわからない。以前にはない状況だ。
ybb.ne.jpのなりすましメール
私のメールybb.ne.jpのアドレスで私宛にメールがくる。
https://support.yahoo-net.jp/PccMail/s/article/H000007399
差出人(From欄)が自分のメールアドレスになっている不審なメールが届く
自分宛にメールを送った覚えがない場合、その不審なメールは、第三者が送信元を偽装して送った「なりすましメール」です。
差出人が自分のYahoo!メールアドレス(@yahoo.co.jp)やYahoo! BBメールアドレス(@ybb.ne.jp)になっている不審なメールが届く事例が報告されています。
自分宛にメールを送った覚えがない場合、その不審なメールは、第三者が送信元を偽装して送った「なりすましメール」です。
なりすましメールは、あたかも自分のメールアドレスからメールが送られてきたように見えますが、実際にはお客様のメールアドレスから送信されているわけではありません。
なりすましメールを受信してしまった場合は、以下の対処をしてください。
- メールを開かずに削除する
- 返信しない
- メールに記載されているURLをクリックしない
※解除手続きのリンクもクリックしてはいけません。 - 添付ファイルを開かない
- 不当な請求には取り合わない
参考
なりすましメールへの対策
以下のなりすましメールへの対策をお試しください。
ヒント
なりすましメールの拒否設定や受信拒否設定は、送信元の情報を改ざんしてお客様のメールアドレスになりすまして送信されたメールはYahoo!メールのサーバーを経由していないため、Yahoo!メール側で送信をブロックできません。
下記の対策は、これらのなりすましメールをお客様のメールボックスに届かないようにする対策であり、送信そのものを停止するものではありません。
ショートコードが表示されない
テンプレートファイル(PHPファイル)でショートコードを使う
テーマを自作している場合など、テンプレートPHPでもショートコードを使いたいと思うことがあります。
その場合は以下のように記述します。
echo do_shortcode( '[ショートコード名]' );
do_shortcode()関数は、引数として渡されたショートコードを解析して実行する関数です。
以下のように書くと、[my_shortcode]というショートコードをテンプレートファイルで実行できます。
<?php echo do_shortcode('[my_shortcode]'); ?>
<div class="col-6">
<?php echo do_shortcode('[timely-calendar]'); ?>
</div>
グーテンベルクのブロックのスタイルが効かない
獅子魂、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つあります。
- テンプレートをページごとに作成(page-〇〇.php)
- 固定ページの編集画面でテキストエディタに直書き(page.php)
このどちらかになります。
管理画面の固定ページから各ページを新規追加するのは共通です。
テンプレートをページごとに作成
この場合は固定ページの数だけ『page-〇〇.php』というテンプレートを作る必要があります。
例えば『会社概要・お問い合わせ・採用情報』の3ページであれば、
- page-company.php
- page-contact.php
- page-recruit.php
という感じになります(〇〇の部分は任意です)
コンテンツ(HTMLに書いたコード)は各テンプレートに書きます。
固定ページ → 新規追加で作成したページには何も書きません。
固定ページの編集画面でテキストエディタに直書き
この場合テンプレートは『page.php』の1つだけで大丈夫です。
こちらは『固定ページ → 新規追加』で作成したページに、それぞれのコンテンツを書きます。
HTMLのコードをそのままコピペに近いです。
どちらの方法で作るか?
ページごとにテンプレート作成
・テンプレート(phpファイル)にコードを書く
・固定ページの編集画面には何も書かない
OR
固定ページの編集画面に直書き
・テンプレート(phpファイル)には書かない(※)
・固定ページの編集画面にコードを書く(HTMLをコピペ)
※ テンプレートには書かないと書きましたが、固定ページの編集画面に書いたコードを呼び出すコードやヘッダー、フッターなどの共通部分を読み込むコードは書きます(コンテンツは書かないという意味です)
どちらの方法で作るかは人によって違うと思いますが、前者のページごとにテンプレートを作成した方が修正がしやすいので、私は特に指定がない限りこの方法で作成しています(『こちらの方法で』など指定されたことはありません)
後者の場合、固定ページ編集画面のテキストエディタにコードをコピペするのですが、後から編集しようとすると非常に見にくいです(やってみると分かると思います)
という事で、ページごとにテンプレートを作成する方法を中心に解説していきます。
固定ページの作り方①:ページごとにテンプレートを作成
まずは管理画面左側の『固定ページ → 新規追加』をクリックします。
すると次のような画面になるので、名前は何でも構いませんが今回は『HOME』とタイトルを付けて右の方にある『公開』ボタンをクリックします(プラグインのClassic Editorを適用しています)
タイトルの下の方にある中身(ビジュアルエディタ、テキストエディタ)は何も書かなくて大丈夫です。
これがトップページになります。
ついでに記事一覧ページ用に『BLOG』という固定ページも同様に作っておきます。
これでこの状態になります。
そしてトップページを『HOME』、記事一覧ページを『BLOG』とするために、管理画面左側の『設定 → 表示設定』を開きます。
次にホームページの表示を『最新の投稿』ではなく『固定ページ』を選択して、以下のように設定します。
- ホームページ → HOME
- 投稿ページ → BLOG
ちなみに今回トップページである『HOME』はfront-page.phpで、記事一覧ページである『BLOG』はhome.phpとなります(home.phpがない場合はindex.phpが記事一覧となります)
あとは1ページに表示したい最大投稿数も設定しておきます。
最大投稿数はテンプレート側で設定することも可能で、その場合はページネーションの関係で1にしておいた方がいいです(ちょっと難しい話なので一旦後回しでOKです)
また、ローカル環境では検索エンジンは関係ありませんが、テストサーバーにアップした時は『検索エンジンがサイトをインデックスしないようにする』にチェックを入れた方がいいので、ここでチェックを入れてしまってもOKです。
本番サーバーに移行して公開する時にはチェックを外すのを忘れないようにしましょう!
注意ポイント
検索エンジンでの表示にチェックを入れないと、サーバーにアップした時点でサイトが公開されてしまいます。
ここまで設定が出来たら下の『変更を保存』をクリックします。
そしてもう一度固定ページ一覧を見ると『HOME』がフロントページ、『BLOG』が投稿ページに設定されたのが分かります。
各固定ページのテンプレートを作成
次は固定ページのテンプレートを作成します。
これはページの数だけ必要になります。
最初の方でも書きましたが、例えば『会社概要・お問い合わせ・採用情報』の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がわかったところで、テンプレートに書くコードは次のようになります。
<?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)
ページ内の一部の表示だけ変える
まずは、カテゴリーごとに変えたい部分が少ないとき。これはテンプレートにin_category()
で条件分岐を作って表示を切り替えればOKです。in_category()
のパラメーターにはカテゴリーのIDまたはslugを指定します。
カテゴリーIDの調べ方はWordPressの管理画面のカテゴリー管理の画面で調べたいカテゴリーにマウスオンするとブラウザの左下に次のようなアドレスが表示されます。その中の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のテンプレートは次のような優先順位になっています。
- category-slug.php
- category-ID.php
- category.php
- archive.php
- 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が表示されなくなった!
影響を受ける例②
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にログインできなくなってしまいます。
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で直接貼り付けることもできます。
マイマップ APIを利用せずに、複数のピンを立てるには、マイマップを利用
獅子魂で利用
Googleマップの機能のマイマップを使えば、APIいらずで複数ピンうてる。
マイプレイス→マイマップ
Excelファイルでポイントを一括登録もできる。
マイプレイスの場所が、仕様変更になった。保存ずみボタンおすと出てくる。
マップ上部の緑の部分はクラスタにdisplay:noneで非表示可能
https://g-tips.jp/google-maps/maps-mymap/
URLを個々の登録地点に張り付けられるが、アンドロイドのスマホのみでリンクが稼働するようだが、iphoneは無理みたい。 ↑7:00あたり
複数の登録地点をまとめて削除する方法
マップに追加変更ある場合は、更新したcsvを再アップして 再インポートしてマージ→再インポート→すべてのアイテムを置換で対応
ピンの色を一括変更方法
均一のスタイルにして、すべてのアイテム右のペンキバケツアイコンからカラー変更可能
マイマップの埋め込み
マイマップの縮尺の変更
マイマップで設置した地図の縮尺を調整してみる
マイマップを設置するにあたって、縮尺を調整する項目が用意されていません・・・
地図を作成した時の縮尺と合致するのかと思っていくら操作しなおしても変わることはありません・・・
折角作ったのに、拡大しすぎてランドマークが入らない、縮小しすぎて詳細がわからない、といった事もありますよね。
それでも大丈夫!
縮尺を調整する方法があります!!
普通に埋め込もうとすると、こんなソースが出てきます。
これにひと手間加えます!
src=””の後ろの方へ「&z=15」を書き足すだけ
<iframe src=”https://www.google.com/maps/d/embed?mid=10f1MyDrYOgnt-JBx9VzexEFwh0U&z=15” width=”640″ height=”480″></iframe>
これだけで地図の縮尺が変更できちゃいます!!
zの値は0~22くらいまであるので、丁度いい所を探してみてください。
&z=11 ぐらいがちょうどいい
マイマップで設置した地図の表示位置を調整してみる
自分で地図を作って、縮尺もバッチリ!!
・・・と思い通りにならないものです。
今度はピンの表示位置が中央じゃなかったり、ちょうどいい感じの位置にいない事があります。
ムキーーーーー!!と苛立つ前に聞いてください。
その表示位置も調整できます。
調整するには緯度・経度を使います。
緯度・経度なんてワカラナイヨ・・・と困ってしまいそうになりますが、大丈夫。
アドレスバーに注目してください。
この数値が緯度・経度です!
ちなみに地図の中央の位置を取ってくるので、調整する時には地図の中央をどの位置にしたいのかを考えながら操作してくださいね。
この数値をsrc=””の後ろの方へ「&ll=」と書いて、書き足すだけ
<iframe src=”https://www.google.com/maps/d/embed?mid=10f1MyDrYOgnt-JBx9VzexEFwh0U&ll=37.76329498797915,138.44170744375015&z=15” width=”640″ height=”480″></iframe>
黒い帯部分の非表示
ところで、上部の黒い帯をなんとかしたくなりません?
マイマップの情報を開いたり、拡大地図を開いたりとそれなりに役目はあるんだけど、ちょっと目立ちすぎ。
早速消しちゃおうと思ったんだけど、これがまた厄介だ。<iframe> 内で表示されているものだから、単純に CSS で直接いじろうとしても、うまくいかない。いろいろ検索してみたけど、難しそうな方法ばかり。
あんまり複雑にしないで、手っ取り早く見えなくしてみます。
<iframe>に CSS で margin-top: -60px; を指定します。
これは、帯部分の最大高さ。場合によっては、46px だったり 59px だったりするみたいなので、60px 分とっておけば大丈夫かと思います。帯の分だけ、上方向にずらしています。
<div class=”map”> には overflow: hidden; を指定してはみだした分を見えなくします。
Star Feild のMODや設定について
PCのグラボなどの設定
リシェード
便利
インベントリ管理
みそは、ダウンロードしたファイルを”Data”ってなまえのフォルダを作って、どちらも解凍後、日本語化ファイルをイベントリ用ファイルに上書きコピーして、cドライブのゲームインストールフォルダではなく、ドキュメント保存先をこちらで変更しているので、eドライブ先の
ドキュメント/My Games/Starfield のDataに上書きすればよい
上書きする順番間違わないようにする。
1.イベントリファイルの解凍
2日本語化の解答
3日本語化のInterfaceの中身を1のInterfaceの中へ上書き
4ドキュメント/MyGames/Starfiled/Data/に1のイベントリファイルで上書きする。
この順番間違えると、両者に同じフォルダやファイルがあるから機能しなくなる
「StarUI Inventory」本体 https://www.nexusmods.com/starfield/m…
「StarUI Inventory – Japanese Translation」日本語化 https://www.nexusmods.com/starfield/m…
あと、ここが肝心なのだが、このインベントリのmodを動かすために、StarfieldCustom.iniをテキストプログラムなど使ってつくり、
[Archive]
bInvalidateOlderFiles=1
sResourceDataDirsFinal=
と入力して作成tarfieldCustom.iniファイルの置き場所は、cドライブのゲーム用プログラム先ではなく、
ドキュメント保存先をこちらで変更しているので、eドライブ先のドキュメント/My Games/Starfield のルート下に置くこと!!そうじゃないとmodが機能しない