投稿

ラベル(wordpress)が付いた投稿を表示しています

【意外と簡単⁉】WordpressのカスタムメニューにBootstrapのクラス名を導入する方法

イメージ
はじめに 現在Wordpressにて自作テーマを作成し、一応サイトの構造の目処が立ったところである。自作テーマの作成については後々報告しようと思う。 その自作テーマのメインナビにBootstrapを導入したいと思い調べたところ、意外と簡単にできたので、その方法をまとめて報告しようと思う。 Bootstrapを導入する前に、まずWordpressでメインナビ用のメニューを作成しておかなければならない。 上図の通り、Wordpressのダッシュボードで、 外観→メニュー にて、カスタムメニューを作成し、メニュー名を設定しておく。 class-wp-bootstrap-navwalker.phpのダウンロードとインストール GitHub から、class-wp-bootstrap-navwalker.phpをダウンロードする。 /wp-content/themes/(使用するテーマ名フォルダ)/ 内に、class-wp-bootstrap-navwalker.phpをアップロードする。 functions.phpにファイル読み込みのコードの追加 /wp-content/themes/(使用するテーマ名フォルダ)/functions.php のfunctions.phpを開き、下記をそのまま追加する。 /** * Register Custom Navigation Walker */ function register_navwalker(){ require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php'; } add_action( 'after_setup_theme', 'register_navwalker' ); 画像下のコードは、上記コードでエラーが発生した時、上記コードと差し替えるものである。 header.phpなどにメニュー用関数の追加と設定 メニュー用関数の追加 下記コードを、 /wp-content/themes/(使用するテーマ名フォルダ)/header.php のheader.phpに追加する。 具体的な追加箇所は次項で。 テーマ...

【需要あるのか⁉】Wordpress自作テーマの投稿一覧ページ自体にアイキャッチ画像を設定する方法

イメージ
はじめに 投稿一覧ページは主に index.php や archive.php などで作成され、投稿一覧に表示される画像は各投稿ページの編集画面で設定されたアイキャッチ画像が読み込まれる仕様になっている。 今回、テーマを自作した際、 投稿一覧ページ自体にアイキャッチ画像を設定したかった のだが、普通にアイキャッチ画像を設定しても、ページには 最新投稿用のアイキャッチ画像が表示されてしまう 。 そもそも、投稿一覧ページ自体にアイキャッチ画像を設定することはほぼ無いので、 需要がどこまであるか不明 だが、この解決方法を見つけたので、一応紹介しようと思う。 事前準備 事前準備として、自作テーマでアイキャッチ画像を表示させるために、functions.phpにアイキャッチ画像を有効化する関数を追加する。 以下の関数をそのままfunctions.phpに追加。 add_theme_support('post-thumbnails'); アイキャッチ画像を表示するthe_post_thumbnail()関数 アイキャッチ画像を表示する関数は、 the_post_thumbnail() だが、これはループ内でのみ使用可能なので、通常は <?php if ( has_post_thumbnail()): ?> <?php the_post_thumbnail(); ?> <?php endif; ?> として使用する。 投稿件数分のアイキャッチ画像を表示するwhile構文 投稿は件数が増減するので、投稿一覧ページで各投稿のアイキャッチ画像を表示するには、投稿がある分全て取得しなければならない。 その場合は while構文 を使用して取得する。 <?php if(has_post_thumbnail()): ?> <?php while(has_post_thumbnail()): ?> <?php the_post_thumbnail(); ?> <?php endwhile; ?> <?php endif; ?> そんな感じで、Wordpressの自作テーマ中に投稿一覧ページ用のind...

初心者がWordpressをインストールしてやらかしたお話

イメージ
一度はWordpressを設定してみたいと思いながら過ぎ去ること幾数年、今回ついに思い立ってやってみることにした。しかし案の定、迷いに迷い遂にはやらかしてしまったことがあったので、これから挑戦しようと考えている方へ、注意喚起と備忘録を兼ねてここに報告したい。 現在レンタルサーバーは「 さくらインターネット 」で「 さくらのレンタルサーバ スタンダード 」を借りているので、さくらインターネットでの設定方法でのお話になることはご寛恕いただきたい。 また、さくらインターネットでのWordpressのインストール方法等は、ネット検索をかけると山のようにあるので、好みの情報を参考にするようにお願いする。(検索ワード「 Wordpress さくらインターネット 」で結構な数見つかるはず) で、やらかした件だが、さくらインターネットの場合、「サーバコントロールパネル」からWordpressをインストールするのだが、その画面は以下のようになっている。 まず上記画像のAに自分が保有しているドメイン(例:https://www.example.com/)を入力する。そしてBを選択してサブディレクトリ、つまりWordpressをドメインにぶら下げておく階層を新たに設定する、という流れである。 だけども何をどうしたのか今となっては不明だが、Bの設定がうまく行かずに、ドメインにそのままWordpressをインストールするという事態に陥ってしまったのである。 本来ドメインには、自身のwebsiteがあったのだが、それがWordpressに差し替わってしまってwebsiteが行方知れずになってしまったのである。 Wordpressをインストールしていろいろな設定をある程度まで済ましてから気付いたので、虚無感が半端なかったのである。 せっかくインストールしたWordpressをアンインストールするはめになり、またさい者からやり直しと相成りました。 皆さん、お気をつけくださいませ。 それから、今回は さくらインターネット でのWordpressのインストールについて話したが、新規で借りる場合は「 wordpress レンタルサーバー 比較 」でネット検索かけることをオススメする。Wordpressはサーバーに負担がかかってくるらしいので、なるべく性能の...