常連

自己紹介

Wordpressで作成したWebサイトでFontAwesomeのアイコンが表示されなくなりました。
有料のテーマを使用しており今までは問題なく表示されていました。

関係あるかはわかりませんがmanifest.jsonとServiceWorker.jsを追加しPWA対応のテストをしたあたりから表示されなくなりました。
PWAチェックはchromeの検証で問題ありませんでした。

PCでキャッシュの消去とハードの再読み込みをすると表示されます。
PCでの動作後にスマホで再表示すると表示されるようになります。
ただしブラウザを閉じ再度を開くと表示されません。

通常の更新では表示されません。

シークレットモードでは表示されます。

別のブラウザや端末でいくつか検証しましたが同じ症状です。

これは何が問題でどこをどう修正すればいいでしょうか。

FontAwesomeでアイコンが四角になって表示されない

ワードプレスを利用してBLOGを書いています。
サーバーはエックスサーバーをりようしています。

過去150記事ほど書いてきましたが、過去記事の一部が何故か表示されなくなってしまいました。

下記のようなメッセージが表示されています。（404エラーというやつでしょうか・・・）

**ホーム >
ページが見つかりませんでした。
お探しのページが見つかりませんでした。下記カテゴリーから記事をお探しになるか、キーワードで検索してみてください。**

記事を消去した記憶もないのに、なぜこのような現象が起きてしまったのでしょうか？
また、記事を再度表示させる方法等ありましたら、ぜひご教授おねがいしまう。

【ページが見つかりませんでした】と表示されてしまいます

### 困っていること

数日前までgzip圧縮後のサイズで結果が返ってきていたのですが、
現状は、圧縮前のサイズが返ってきます。

before afterで何も変更はしておりません。

PageSpeedInsightsはLighthouseを使用しているという認識なのですが、
同じくChrome＞デベロッパーツール＞AuditsのLighthouseを使用すると、正しくgzip圧縮後のサイズで配信されています。

httpレスポンスヘッダーやその他、外部のgzip圧縮できているかを確認するツールで調べても
問題なく圧縮できているようです。

これはPageSpeedInsightsの一時的な問題、もしくは仕様変更という認識でよいのでしょうか？

なにか対処法がある場合にはご教授頂けますと幸いです。

### 現環境
サイトはSIRIUSというCMSで構成されています。
PC/SPでワンソースではなく、SPはサイト/sp/のようなディレクトリ構成です。

以下、.htaccessです。

**PC**
```htaccess
Header set Content-Security-Policy: upgrade-insecure-requests

RewriteEngine on

RewriteCond %{THE_REQUEST} ^.*/index.html

RewriteRule ^(.*)index.html$ http://xn--wlr53q.net/$1 [R=301,L]
RewriteEngine on

RewriteCond %{HTTP_HOST} ^www.xn--wlr53q.net

RewriteRule ^(.*)$ http://xn--wlr53q.net/$1 [R=301,L]
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android|BlackBerry)
RewriteRule ^(.*).js iphone/$1.js [L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://xn--wlr53q.net/$1 [R=301,L]
RewriteCond %{HTTP_HOST} ^www.xn--wlr53q.net$
RewriteRule ^(.*)$ https://xn--wlr53q.net/$1 [R=301,L]

<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE
  BrowserMatch ^Mozilla/4.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

  Header append Vary Accept-Encoding env=!dont-vary

  # 画像は再圧縮しない
  SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

  # 圧縮設定
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
<ifModule mod_headers.c>
Header Set Vary User-Agent
</ifModule>

RewriteEngine Off
RewriteEngine On
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 7 days"
ExpiresByType image/bmp "access plus 10 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType text/js "access plus 10 days"
ExpiresByType text/javascript "access plus 10 days"
ExpiresByType text/x-javascript "access plus 10 days"
ExpiresByType application/javascript "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
</ifModule>

RewriteBase /
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|Windows.*Phone|BlackBerry)
RewriteRule ^$ iphone/redirect.php?f=index.html [L]
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|Windows.*Phone|BlackBerry)
RewriteRule ^(.*).html iphone/redirect.php?f=$1.html [L]
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|Windows.*Phone|BlackBerry)
RewriteRule ^(.*).css iphone/$1.css [L]
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|Windows.*Phone|BlackBerry)
RewriteRule ^img/(.*) iphone/img/$1 [L]
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|Windows.*Phone|BlackBerry)
RewriteRule ^(.*)/ iphone/redirect.php?f=$1/index.html [L]
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|Android.*Mobile|Windows.*Phone|BlackBerry)
RewriteRule ^(.*) iphone/$1 [L]

RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|UP.Browser|J-PHONE|Vodafone|SoftBank)
RewriteRule ^$ m/redirect.php?f=index.html [L]
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|UP.Browser|J-PHONE|Vodafone|SoftBank)
RewriteRule ^(.*).html m/redirect.php?f=$1.html [L]
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|UP.Browser|J-PHONE|Vodafone|SoftBank)
RewriteRule ^img/(.*) m/img/$1 [L]
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|KDDI|UP.Browser|J-PHONE|Vodafone|SoftBank)
RewriteRule ^(.*)/ m/redirect.php?f=$1/index.html [L]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

<FilesMatch ".css.gz$">
        ForceType text/css;charset=Shift_JIS
        AddEncoding x-gzip .gz
</FilesMatch>
<FilesMatch ".js.gz$">
        ForceType text/javascript;charset=UTF-8
        AddEncoding x-gzip .gz
</FilesMatch>
```


**SP**
```htaccess
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 7 days"
ExpiresByType image/bmp "access plus 10 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType text/js "access plus 10 days"
ExpiresByType text/javascript "access plus 10 days"
ExpiresByType text/x-javascript "access plus 10 days"
ExpiresByType application/javascript "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
</ifModule>
RewriteEngine Off
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (DoCoMo|KDDI|DDIPOKET|UP.Browser|J-PHONE|Vodafone|SoftBank)
RewriteRule ^(.*)$ https://xn--wlr53q.net/$1 [R,L]
RewriteCond %{HTTP_USER_AGENT} !(iPhone|iPod|Android.*Mobile|Windows.*Phone|BlackBerry)
RewriteRule ^(.*)$ https://xn--wlr53q.net/$1 [R,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !redirect.php
RewriteRule ^(.*?)$ redirect.php?nf=$1 [L]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

<FilesMatch ".css.gz$">
        ForceType text/css;charset=Shift_JIS
        AddEncoding x-gzip .gz
</FilesMatch>
<FilesMatch ".js.gz$">
        ForceType text/javascript;charset=UTF-8
        AddEncoding x-gzip .gz
</FilesMatch>
```

その他、SVGを導入した際に画像と認識されない問題が発生した為、CMS発行元に問い合わせたところ、
SVGディレクトリに.htaccessを追加すればいいという助言を受け、以下をサイト/svg/とサイト/sp/svg/に置いています。

```htaccsess
RewriteEngine Off
```



### 実現したいこと

PageSpeedInsights側の問題なのか、はたまた別の問題なのかを明確にしたいです。

PageSpeedInsightsにてgzip配信が認識されない

ie9で display:flexが効かないので、flexibility.jsで対応することにしました

その結果、横並びにはなったのですが、折り返してくれません
ソースは以下のとおりです

```html
<head>
略

</head>


<ul>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
```

```css
ul{
-js-display:flex;
display:flex;
flex-wrap:wrap
}
li{
width:50%;
display:inline-block;
}
```

flex-wrap:wrapが効かないときのために <li>に display:inline-blockを指定するという情報も見たので
対応しているつもりですが…

何が問題なのでしょうか、ご意見よろしくおねがいします

ie9でdisplay:flex（flexibility.js） flex-wrap:wrapが効かない

WorePressで、2通りの記事検索方法を使用できるようにしたいと考えています。

そのため、現在もう1つの記事検索結果画面を固定ページのテンプレートファイルで作成しています。

テンプレートファイルだという記述（/** * Template Name: 〜 */）と、デフォルトのsearch.phpのコードのコピペを新たなPHPファイルに載せ、テーマディレクトリ配下にアップロードしました。

そして、固定ページの新規作成、テンプレートの設定をし、実際にそのページを見てみたところ、「検索結果」ページとはなっていたのですが、その検索対象が、新規作成した「固定ページ」1件となっていました。

私のイメージとしては、WordPress内に存在する投稿記事が検索結果の対象として表示することです。

どうしてこのような現象が起きているのでしょうか。
また、私のイメージ通りにするにはどのようにすれば良いのでしょうか。

何卒よろしくお願いいたします。

WordPressで、記事検索結果画面のテンプレートを作りたい

超初心者の質問すいません。

新しく二つ目のブログを開設しましたが…

サーチコンソールが正しく追加できません。

詳しく調べたとこりロゴやサイドバーが表示されるのですがエラー404が出てサイト事態が無いことになってます。

ＨＴＭＬメタタグを貼っても「確認できませんでした」っと表示されます。

写真を貼れたらいいのですが…

説明下手くそですいません。

サーチコンソールがわからない

Wordpressの外観―メニューの箇所から、リンク先の後にonclickを入れたいのですが、方法がよくわかりません。function.phpに何か書けばできますでしょうか？

目的はGoogle Anaryticsの外部クリック計測です。

<a href="https://hogehoge.com/page1.html" onclick="ga('send', 'event', 'outboundLinks', 'click', this.href, {'nonInteraction': true});">おすすめのサイト</a>

のようにonclick以下を挿入したいのです。

よろしくお願いいたします。

Wordpressのカスタムメニューでリンク先の後にonclickを挿入したい

### 前提・実現したいこと

始めてHTMLにてサイト作ってみてるのですが、
footer的なものを作る際に、
リストのレイアウトが崩れて表示されてしまいます。
原因がわかる方いらっしゃいませんか？

### 発生している問題・エラーメッセージ

```
  <div>
    <ul class="index">
      <li><a href="index.html">about</a></li>
      <li><a href="index.html">works</a></li>
      <li><a href="index.html">blog</a></li>
      <li><a href="index.html">contant</a></li>
    </ul>

　</div>
```

```ここに言語名を入力
.index {
  text-decoration: none;
  font-size: 20px;
}
```

### 試したこと
text-decoration: none;
も聞いてくれません、なにか関係があるのでしょうか
お願いします！!

![![イメージ説明](71c8bb9d988a21fccc0ab3a2eca520a5.png)](1622b3e74c47cfae92e601cfc6052204.png)

HTMLにてリストがずれて表示されてしまいます。

worrdpressのメディアライブラリが表示されなくなりました。

その際対策としてプラグインの停止、wp-config.phpにコード追加、admin-ajax.phpの修正、テーマの変更を行いましたが変化はありませんでした。
他にどのような原因が考えられるでしょうか。


![イメージ説明](98e38dcd3aa03cccf874f16d1e9b8c05.jpeg)

wordpressのメディアライブラリが表示されない

すみません、調べても出てこなかったものでこちらで質問させていただきたいです。

googleのカスタム検索に広告が出るのが嫌で、wordpressのサイト内検索にしようとしています。
検索結果をgoogleのカスタム検索の様に
「タイトル」「テキスト抜粋」「アイキャッチ画像」で表示したいのですが、表示の仕方が分かりません。

参考サイトや方法等分かりましたら教えて頂きたいです。

以下、search.phpの中身です。

```


<?php get_header(); ?>

<?php
    global $wp_query;
    $total_results = $wp_query->found_posts;
    $search_query = get_search_query();
?>
<?php
global $wpdb;

$keyword = get_search_query();
$keyword = '%' . like_escape( $keyword ) . '%';

$post_ids = $wpdb->get_col( $wpdb->prepare( "
    SELECT DISTINCT post_id 
    FROM {$wpdb->posts} T1, {$wpdb->postmeta} T2
    WHERE T1.post_title LIKE '%s'
    OR T1.post_content LIKE '%s'
    OR T2.meta_value LIKE '%s'
", $keyword, $keyword, $keyword ) );

$args = array(
    'post_type'   => 'post',
    'post_status' => 'publish',
    'post__in'    => $post_ids,
);

$query = new WP_Query( $args );
?>
<div class="search_result">
<h1 class="result_ttl"><?php echo $search_query; ?>の検索結果<span>（<?php echo $total_results; ?>件）</span></h1>
 
<?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>
 
<h2 class="search_txt">
  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<p><?php the_excerpt(); ?></p>
 
<?php endwhile; endif; else: ?>
 
<?php echo $search_query; ?> に一致する情報は見つかりませんでした。
 
<?php endif; ?>
</div>

<?php get_footer(); ?>

</body>
</html>


```

wordpress、サイト内検索でのアイキャッチ画像表示

### 前提・実現したいこと
3つ素材ABCを並べて動かしたい。
![イメージ説明](de22bc21b18eae8899488482182496b3.jpeg)
### 発生している問題・エラーメッセージ

```
素材自体のサイズが全て同じでwidhtも100％にしているのにA＞B＞Cの順のサイズになってします。
PCで見ると平気ですがスマホで見るとサイズが変わってしまいます。
```
### 該当のソースコード

```css
  @keyframes float1 {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-10px);
  }
  100% {
    transform: translatey(0px);
  }
  }

  #bg{
  position: relative;
   }

  #a{
    animation: float1 2s ease-in-out infinite;
    position: absolute;
    float: left;
    left:27%;
    top:63.27%;
    transition-duration: 0.1s;
     margin:auto auto;
  }
  #b{
    animation: float1 2s 0.2s ease-in-out infinite;
    position: absolute;
    float: left;
    left:50%;
    top:63.27%;
     margin:auto auto;
  }
  #c{
    animation: float1 2s ease-in-out infinite;
    position: absolute;
    float: left;
    left:72%;
    top:63.27%;
     margin:auto auto;
  }
```
```HTML
　
  <div class="main">
    <div  class="cf" id="bg"><img src="#" alt="" width="100%"></div> 
    <div  class="cf" id="a"><img src="#" alt="" width="100%"></a></div>
    <div  class="cf" id="b"><img src="#" alt="" width="100"></a></div>
    <div  class="cf" id="c"><img src="#" alt="" width="100%"></a></div>
  </div>
```

position absolute を使って素材を特定の位置に決まったサイズで置きたい

現在Twitter APIを用いて
あるユーザーの集合から
リプライツイートを一番多くしている
ユーザーを調べる方法を探しています．

すでに無作為に選ばれた10000人のユーザーの集合があるという形で
各ユーザーの今までのツイート総数はJSON形式で
データは受け取っています．
今考えているのは、
GET statuses/user_timelineのパラメーターに
exclude_repliesをTrueにして複数回読み込み，

（今までのリプライツイートの総数）＝（今までのツイート総数）-（リプライなしの今までのツイート総数）

で求めることはできると思うのですが、
ユーザーの集合が10000人くらいだった場合，
これを一人一人やっていたら
15分間でGET statuses/user_timelineで取得できるデータは
18万件までなので，現実的ではないです．

どのようにすれば10000人のユーザーからリプライツイートが一番多い人を
選べるでしょうか。

Twitter APIを用いて、あるユーザーの集合からリプライツイートが一番多いユーザーを調べる方法について

下記のコードは子がabsoluteの時に親の高さが死んでしまうので
親にpadding-topを設定し高さを指定しているコードです。

このコードでは子の高さが可変だった場合親の高さがheight:100%で固定になってしまいます。
子の高さが可変だった場合に親の高さを可変にする方法はあるでしょうか
例 innerが高さ300pxの時は親も300pxにしたい

```ここに言語を入力
<div class="box ratio-1_1">
    <div class="inner">
        <p>1 : 1</p>
    </div>
</div>

<style>
.box {
    position: relative;
    width: 50%;
    height: auto;
    background: #444;
}
.ratio-1_1:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
}
.inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background:red;
}
</style>
```

absoluteの時に親の高さを動的にしたい

こちらのページのスマホ閲覧時に起こる現象なのですが、

https://movies-c.com/movies/136

Chromeにて要素の検証を行うとページ上部のYouTube動画がwidth:100%の状態で中央に現れてくれるのですが、

実機で確認すると以下のようにYouTube動画が左にずれて表示されてしまいます。

![イメージ説明](da7046a8358b8d6c1b7c6dd71293f766.jpeg)

safariの開発ツールで実機でも要素の検証を行い、周りのHTML要素にwidth:100％やfloat:leftをかけてみたのですが、それでもやはりびくともせずでした。

何が原因なのか分からずでして、教えていただけますと幸いです。

どうぞ宜しくお願いいたします。

要素の検証と実機とで見え方が異なる

### 前提・実現したいこと
![[イメージ説明](964a75dcb0031cdad4647e6f90410dcb.png)]
https://plusers.net/wordpress_theme_3
こちらのサイトを参考にナビボタンをクリックしたらアニメーションなるのですがjQueryが動きません。
ネットで色々と調べたのですが原因が分かりません。

### 該当のソースコード

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=auto">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?> >
  <header>
    <div class="header-container">
      <div class="header-logo">
        <h1 class="logo"><a href="<?php echo esc_url( home_url( '/' )); ?>" class="logo-link"><img src="<?php echo get_template_directory_uri(); ?>/./lib/images/logo.png" alt="<?php bloginfo('name'); ?>"></a></h1>
      </div>
      <div class="header-navtoggle">
        <div>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <nav class="header-globalnav">
        <?php wp_nav_menu( array( 
        'theme_location'    => 'header-nav',
        'container'         => 'nav',
        'container_id'      => 'header-nav',
        'container_class'   => 'header-nav',
        'fallback_cd'       => '' )); ?>

      </nav>
    </div>
  </header>
```navbutton.js
```jQuery
jQuery(function(){
  jQuery(".header-navtoggle").on("click",function(){
    jQuery("header").toggleClass("open");
    jQuery("nav").slideToggle(500);
  });
});
```functions.php
```php
<?php 
// テーマのセットアップ
// titleタグをhead内で生成する
add_theme_support( 'title-tag' );
// HTML5のマークアップ
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// Feedのリンクを自動で生成する
add_theme_support( 'automatic-feed-links' );
// アイキャッチ画像を使用する指定
add_theme_support( 'post_thumbnails' );
// カスタムメニュー
register_nav_menu( 'header-nav', 'ヘッダーナビゲーション' );
register_nav_menu( 'footer-nav', 'フッターナビゲーション' );
//メニューボタンjs呼び出し
function navbutton_scripts(){
  wp_enqueue_script( 'navbutton_script', get_template_directory_uri() .'./js/navbutton.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts' , 'navbutton_scripts' );
```
### 試したこと

WordPressでjQueryが動かないときの対処法を見て同じようにしたのですが
原因がわかりませんでした。

WordPress ナビボタンをクリックしてもアニメーションで開閉になりません。

stylusで
*{
    background-color:#006400 !important;
  
}
と記述した場合にサイト（https://support.google.com/*）が正しく表示されないのですがcssを特定のurlに適用しないなどの対処方法を教えてください。

background-color:でサイト（https://support.google.com/*）が正しく表示されない場合の対処方法

ワードプレスのEmbed機能に関する質問です！どうかお知恵貸してください。
(初心者レベルで質問内容に不十分な点ありましたらお詫び申し上げます)

### 前提・実現したいこと
アメブロ→WPに記事引っ越し完了したのですが、記事に埋め込んであるTwitter投稿が
引用表示されてしまうため、Embed機能を生かすためにはTwitter投稿のURLに変更しなくてはならないようです。

しかし、記事数が300近くあるので確認して変更するのが大変なため
一括変更してEmbed機能を生かす方法はないか模索しております。


### 試したこと

Javascriptかと、下記も参考にやってみたのですが・・・何も変わらなくてダメでした。涙
http://tanweb.net/2018/05/03/20762/

### 追記・補足情報
記事インポートツールで引っ越しました。

全記事ではなく、部分的に引用表示になっていることが分かりました。
正しく表示されているものと混在している理由が分からなくて、さらに悩んでいます。
引き続き調べていますが、Embed機能を残しておきたいので手入力しかないのかなと諦めそうですが。。

何かヒントでも嬉しいので、どうぞ宜しくお願い致します！！

ワードプレス記事でTwitter埋め込みが引用表示されるので、カード表示に一括変更したい

wordpressでホームページを作っています。
スマホで見た時にフッターにホームや戻る、進むといった固定の
メニューを表示したいです。
ページをスクロールしても付いてくるようにしたいのですが
わからず、どなたかご教授いただければ幸いです。

試しているのはfooter.phpに以下を記述しています。
ですが、これでは一番下にスクロールした時のみ表示され
固定で表示することはできません。画面をスクロールしてる
時もずっと下に付いてくるようにしたいですが。
どのように記述すればよいのでしょうか？
<script>

//戻る
function modoru(){
  history.back();
}

//進む
function susumu(){
  history.forward();
}

//更新
function koshin(){
  location.reload();
}

</script>

<form>
<p><br></p>

<input type="button"  value="ホーム" onclick="location.href='http://nihon-lifix.com/235-2/';" style="width: 84px; height: 36px; padding: 0.75em 2em;">
<input type="button"  value="戻る" onclick="modoru()">
<input type="button"  value="進む" onclick="susumu()">
<input type="button"  value="更新" onclick="koshin()">
</form>