質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.45%

  • WordPress

    9152questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    7822questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5307questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WPテーマ【twentyseventee】のカスタムについて

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 216

meeee

score 2

ワードプレスのテーマtwentyseventeeを使用しております。
(テーマtwentyseventee:https://ja.wordpress.org/themes/twentyseventeen/)
以下の3点がわからず苦戦しているため、どなたかお分かりになる方がおりましたらご教授いただけると幸いです。
質問の仕方で至らない点がございましたら、ご指摘いただければと思います。
よろしくお願いいたします。

現在、以下の画像の①〜③の内容をクリアにしたいと考えております。

イメージ説明

① ナビと画像の幅を無くして、ナビ下すぐに画像を配置するようにしたい
② 下層ページのページ毎に、表示する画像を変更したい
③ ページ毎にこ固定ページのタイトル後に「について」というテキストをつけて表示したい

上記の②については、以下の画像のような状態にしたいと考えています。

イメージ説明

現在のコードは、以下になります。

-----------------------------------------------------
nav コード
-----------------------------------------------------
<?php
/**
 * Displays top navigation
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.2
 */

?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentyseventeen' ); ?>">
    <button class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
        <?php
        echo twentyseventeen_get_svg( array( 'icon' => 'bars' ) );
        echo twentyseventeen_get_svg( array( 'icon' => 'close' ) );
        _e( 'Menu', 'twentyseventeen' );
        ?>
    </button>

    <?php wp_nav_menu( array(
        'theme_location' => 'top',
        'menu_id'        => 'top-menu',
    ) ); ?>

    <?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && has_custom_header() ) : ?>
        <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
    <?php endif; ?>
</nav><!-- #site-navigation -->
<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>
<img src="http://test.jp/wp-content/uploads/2018/12/shinki1-min.jpg" width="100%" height="40%">

<div class="wrap">
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <?php
            while ( have_posts() ) : the_post();

                get_template_part( 'template-parts/page/content', 'page' );

                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;

            endwhile; // End of the loop.
            ?>

        </main><!-- #main -->
    </div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();
html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

figcaption,
figure,
main {
    display: block;
}

figure {
    margin: 1em 0;
}

hr {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
    outline-width: 0;
}

abbr[title] {
    border-bottom: 1px #767676 dotted;
    text-decoration: none;
}

b,
strong {
    font-weight: inherit;
}

b,
strong {
    font-weight: 700;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

dfn {
    font-style: italic;
}

mark {
    background-color: #eee;
    color: #222;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

audio,
video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

img {
    border-style: none;
}

svg:not(:root) {
    overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    border: 1px solid #bbb;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

progress {
    display: inline-block;
    vertical-align: baseline;
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details,
menu {
    display: block;
}

summary {
    display: list-item;
}

canvas {
    display: inline-block;
}

template {
    display: none;
}

[hidden] {
    display: none;
}
/*--------------------------------------------------------------
12.0 Navigation
--------------------------------------------------------------*/

.navigation-top {
    background: #fff;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    font-size: 16px;
    font-size: 1rem;
    position: relative;
}

.navigation-top .wrap {
    max-width: 1000px;
    padding: 0;
}

.navigation-top a {
    color: #222;
    font-weight: 600;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.navigation-top .current-menu-item > a,
.navigation-top .current_page_item > a {
    color: #767676;
}

.main-navigation {
    clear: both;
    display: block;
}

.main-navigation ul {
    background: #fff;
    list-style: none;
    margin: 0;
    padding: 0 1.5em;
    text-align: right;
}

/* Hide the menu on small screens when JavaScript is available.
 * It only works with JavaScript.
 */

.js .main-navigation ul,
.main-navigation .menu-item-has-children > a > .icon,
.main-navigation .page_item_has_children > a > .icon,
.main-navigation ul a > .icon {
    display: none;
}

.main-navigation > div > ul {
    border-top: 1px solid #eee;
    padding: 0.75em 1.695em;
}

.js .main-navigation.toggled-on > div > ul {
    display: block;
}

.main-navigation ul ul {
    padding: 0 0 0 1.5em;
}

.main-navigation ul ul.toggled-on {
    display: block;
}

.main-navigation ul ul a {
    letter-spacing: 0;
    padding: 0.4em 0;
    position: relative;
    text-transform: none;
}

.main-navigation li {
    border-bottom: 1px solid #eee;
    position: relative;
}

.main-navigation li li,
.main-navigation li:last-child {
    border: 0;
}

.main-navigation a {
    display: block;
    padding: 0.5em 0;
    text-decoration: none;
}

.main-navigation a:hover {
    color: #767676;
}

/* Menu toggle */

.menu-toggle {
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #222;
    display: none;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.5;
    margin: 1px auto 2px;
    padding: 1em;
    text-shadow: none;
}

/* Display the menu toggle when JavaScript is available. */

.js .menu-toggle {
    display: block;
}

.main-navigation.toggled-on ul.nav-menu {
    display: block;
}

.menu-toggle:hover,
.menu-toggle:focus {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.menu-toggle:focus {
    outline: thin solid;
}

.menu-toggle .icon {
    margin-right: 0.5em;
    top: -2px;
}

.toggled-on .menu-toggle .icon-bars,
.menu-toggle .icon-close {
    display: none;
}

.toggled-on .menu-toggle .icon-close {
    display: inline-block;
}

/* Dropdown Toggle */

.dropdown-toggle {
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #222;
    display: block;
    font-size: 16px;
    right: -0.5em;
    line-height: 1.5;
    margin: 0 auto;
    padding: 0.5em;
    position: absolute;
    text-shadow: none;
    top: 0;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    background: transparent;
}

.dropdown-toggle:focus {
    outline: thin dotted;
}

.dropdown-toggle.toggled-on .icon {
    -ms-transform: rotate(-180deg); /* IE 9 */
    -webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
    transform: rotate(-180deg);
}

/* Scroll down arrow */

.site-header .menu-scroll-down {
    display: none;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • CHERRY

    2019/01/07 13:42 編集

    CSS の中身を追いかけないで回答したけど、 twentyseventeen の style.css と質問に記載されている CSS が違いますね。 この CSS のファイル名は、何でしょうか? (もしかして、途中で切れているのかな?)

    キャンセル

  • meeee

    2019/01/07 16:56

    dit.さま
    ご連絡くださり、ありがとうございます。
    子ページは作成してあります!

    キャンセル

  • meeee

    2019/01/07 16:57

    CHERRYさま
    ご返答くださり、ありがとうございます。
    CSSの全体を載せるとかなりの長さになってしまうため、途中部分を削除して必要そうな部分だけを記載いたしました。

    キャンセル

回答 1

+2

1) 管理画面(ダッシュボード)の「外観」→「カスタマイズ」で、「メニュー」を設定したのであれば、

style.css の .site-content の 「padding: 5.5em 0 0;」が、コンテンツ上部の余白なので、ここを調整。

例: padding: 0 0 0; 

5.5em -> 0 にすると コンテンツ下側の余白も無くなるので、下は残したいであれば、 padding: 0 0 0 5.5em; 等にする。

2) 詳細が不明なので、具体的に記載してください。

たとえば、WordPress のテンプレートファイル内で行うのであれば、

<img src="http://viasto-test.ciao.jp/wp-content/uploads/2018/12/shinki1-min.jpg" width="100%" height="40%">

の部分を ページ毎に if で条件判断して切り替えるようにする等

例:
画像は、テンプレートの images にあると仮定。

<?php
    if( is_page( 'page1' ) ) {
        echo '<img src="'.get_stylesheet_directory_uri().'/images/page1.jpg" />';
    } elseif( is_page( 'page2' ) ) {
        echo '<img src="'.get_stylesheet_directory_uri().'/images/page2.jpg" />';
    } elseif( is_page( 'page3' ) ) {
        echo '<img src="'.get_stylesheet_directory_uri().'/images/page3.jpg" />';
    } else {
        echo '<img src="'.get_stylesheet_directory_uri().'/images/shinki1-min.jpg" />';
    }
?>

関数リファレンス/is page

3) template-parts/page/content-page.php の中で表示しているので、

title の部分

<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

を変更する。

たとえば、

<?php the_title( '<h1 class="entry-title">', 'について </h1>' ); ?>

に変更。

テンプレートタグ/the title


どの CSS が適用されているか調べる方法については、下記等を参照してください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/07 17:49

    CHERRYさま
    ご回答くださり、ありがとうございます。
    上記、①、②については問題をクリアにすることができました。
    初心者の私でも、とてもわかりやすい文章で理解しやすく大変ありがたいです。

    ③についてなのですが、もしかしたら最初の段階でテンプレートにショートコード(?)が記載されていたのかもしれないですが、削除してしまった可能性がありお教えいただいたコードを記入しても表示されませんでした。

    説明が苦手なためつたわならなかったらごめんないさい。
    以下、CERRYさんの回答をみた私の解釈なのですが
    content-page.phpに記載した内容が、page.phpに表示されるという認識なのですが間違いないでしょうか。
    さらに、page.php内に記載がある以下のコードで表示されるはずだと思うのですが違いますでしょうか。

    <?php
    while ( have_posts() ) : the_post();

    get_template_part( 'template-parts/page/content', 'page' );

    // If comments are open or we have at least one comment, load up the comment template.
    if ( comments_open() || get_comments_number() ) :
    comments_template();
    endif;

    とても初歩的な事を質問してしまい、申し訳ありません。

    キャンセル

  • 2019/01/08 09:37 編集

    まず、子テーマを使われている場合、子テーマに存在しないファイルは、親テーマのファイルが参照される仕組みになっています。

    子テーマにファイルを追加したい場合(親テーマのファイルの内容を修正する場合)は、親テーマの同じ階層にある該当ファイルを子テーマにコピーしてから、編集してください。

    ----

    コメントに記載された PHP コードの意味を書かれている内容を説明すると

    > while ( have_posts() ) : the_post();

    WordPress のループの始まり、$post をセットする。

    > get_template_part( 'template-parts/page/content', 'page' );

    template-parts/page/content-page.php ファイルをこの位置に読み込むという関数です。

    > if ( comments_open() || get_comments_number() ) :
    > comments_template();
    > endif;

    コメントが有効ならコメント欄のテンプレートをこの位置に表示する。

    となります。

    ----

    ` get_template_part( 'template-parts/page/content', 'page' ); ` があるので、 template-parts/page/content-page.php の中を見てみると、以下ののようなコードです。(コメント覗く。 https://themes.svn.wordpress.org/twentyseventeen/1.9/template-parts/page/content-page.php より)

    ```
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    <?php twentyseventeen_edit_link( get_the_ID() ); ?>
    </header><!-- .entry-header -->
    <div class="entry-content">
    <?php
    the_content();

    wp_link_pages( array(
    'before' => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
    'after' => '</div>',
    ) );
    ?>
    </div><!-- .entry-content -->
    </article><!-- #post-## -->
    ```

    このファイルの中で、 the_title() という 投稿のタイトルを表示する関数 ( https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_title ) が仕様されているので、ここで投稿のタイトルを表示していると判断しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • WordPress

    9152questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    7822questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    5307questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。