「WordPress」カテゴリーアーカイブ

固定フッターを導入できるプラグイン – WordPress

スクロールしてもフッターがついてくるようになっているページが結構あるが、Wordpressでもこの
固定フッターを導入できる。
固定フッターに「ログインボタン」を追加したりすると、なかなかいい感じになる。

functions.php やページ用のファイル(index.phpやfooter.phpなど)に記述しても大丈夫だが、テンプレートがアップデートされると、カスタマイズが上書きされて消えたりする。
もちろん子テーマを使う事で上書きは回避できるが、そういった複雑な手段を使わなくても、簡単にプラグインで追加できる。

プラグイン Simple Sticky Footer

WordPress公式ディレクトリはここ。
https://ja.wordpress.org/plugins/simple-sticky-footer/

ワードプレスの管理画面「プラグイン」→「新規追加」で「Simple Sticky Footer」と検索する。

インストールして有効化。

「固定ページ」→「新規追加」で固定フッターに表示したい内容を記述する。
この写真では無料会員登録ページへのリンクを追加してみた。

固定ページの追加が終わったら、次は、「外観」→「Sticky Footer」をクリック。

Sticky Footer の設定ページで

Select page
先ほど追加した固定ページのタイトルを選択しよう。

幅/Width
ページの幅を入力。入力しない場合でも表示はされるので、入力必須ではない。

Animation Effect
アニメーション・エフェクト、Fade(フワッと表示)などを選べる。

Delay(s)
秒単位でアニメーション・エフェクトの時間を入力。

Addition CSS Rules
スタイルシートを入力できる。色や透過具合などもこれで設定可能。

隠す/hide
If this box is checked the Sticky Footer will be a hidden div. It is useful when you want to put some tracking scripts or other hidden HTML elements.
このボックスにチェックを入れると、フッターが表示されなくなる。これは、SEO用のアクセス解析のコードとかを入れる時に便利。

I want to use shortcodes
If this box is checked the Sticky Footer will be showed only on the pages where the shortcodes were inserted.
ショーとコードを入力したページにのみ、固定フッターが表示されるようになる。
特定のページにだけ表示させたい場合に便利。

この Simple Sticky Footer を活用して、ログインボタンを下の固定フッターに表示させたりなんかするといい感じになる。

ログインした人にはログインボタンを非表示にする方法は、関連記事に紹介しているので、参考にしていただきたい。
—————
関連記事：
WordPressで、ログイン時だけdisplay noneなどを適用し、非表示にする方法

WordPress, スマホ・パソコン・Web関連

WordPressでログインしてる時だけスタイルシートを追記する方法

2016/01/07 あすたまコメントする

WordPressで、ログイン時だけdisplay noneなどを適用し、非表示にする方法

例えば、「ログインはこちら」などを固定フッターに表示しているが、ログインした人には、固定フッターそのものを非表示にしたい場合などに便利。

↓↓↓ログインすると、固定フッターを非表示に↓↓↓

ちなみに、上の写真のように、固定フッターに「ログインボタン」を追加するのに便利なWordperssのプラグインはこちらの記事を参照。
固定フッターを導入する方法ワードプレスプラグインSimple Sticky Footer

functions.phpにログイン時のみ、CSS追記をする記述を追加

管理画面の「外観」→「テーマの編集」→「テーマのための関数(functions.php)」とクリックして、 functions.php に、

add_action( ‘wp_head’, ‘footer_custom’);
function footer_custom() {
if ( is_user_logged_in() ) :
echo ‘<style type=”text/css”>#sticky-footer {display: none;}</style>’;
endif;
}

と追記しよう。

add_action( ‘wp_head’, ‘footer_custom‘);
function footer_custom() {

この、footer_custom は任意の名前でOK。

これで、ログイン時のみ、ヘッダーに、「id=”sticky-footer” に対して display: none; ね」と追記することができる。

応用編、ログインしてない時だけに適用する

add_action( ‘wp_head’, ‘footer_custom’);
function footer_custom() {
if ( is_user_logged_in() ) :
else :
ここに非ログイン時の処理を記載
endif;
}

こんな感じで色々使える。

WordPress, スマホ・パソコン・Web関連

WordPressの子テーマを最速で適用する手順

2016/01/02 あすたまコメントする

WordPressのテーマを子テーマ化する最速の方法

細かい説明一切無しの手順。

1．FTPソフトで子テーマフォルダを作る

/wp-content/themes　の中に　「テーマ名-ch」と言う名のフォルダを作成する。
ちなみに名前はなんでもいいので、適当でもOK。

2．作ったフォルダにcssファイルとfunctions.phpファイルをアップロード

FTPソフトで、今作った子テーマフォルダに、style.cssとfunctions.phpをアップロードする。

・style.css
・functions.txt
↑「右クリック」「名前を付けて保存」でダウンロードせよ。

style.cssの中身

/*
Theme Name: Child
Template: twentytwelve
*/

Theme Name: これは適当でいい。
Template:　の右の「twentytwelve」と書いてある部分は、親のテーマのフォルダ名なので、違うテンプレートを使っている場合は、(FTPソフトなどを見て)親のテーマのフォルダ名に変更する事。

functions.txt の中身

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

こちらは編集する必要はないので、拡張子の.txtを、.phpに変更し、functions.phpをそのまま子テーマフォルダにアップロード。

3. 親テーマのカスタマイズしたphpを子テーマフォルダにアップロード

例えば、ヘッダーをカスタマイズした場合、親テーマのheader.phpを一旦ダウンロードし、子テーマフォルダにアップしなおす。

子テーマフォルダ内はfunctions.php、style.css、header.php（などのカスタマイズしたphpファイル）の3つだけ。

4. ワードプレス管理画面から、テーマを子テーマに変更する

「外観」→「テーマ」→「Childなどの子テーマの名前を選んで有効化」

※ヘッダー画像、jetpackのCSS編集、メニューなど、テーマ由来の設定は一旦初期化される(削除されるわけではない)ので、先にコピペメモをとるなり、覚えておくなりする事。
一般設定、表示設定、パーマリンク設定などは初期化されないのでそのままでOK。

5. メニューやCSS編集(jetpackプラグイン)などの設定をやりなおす

「外観」→「メニュー」→「位置の管理」で、メニューを以前と同じものを選んだり、ヘッダー画像を戻したりすれば、全て元通り。

これで、子テーマ適用完了。

あすたまいず