메인화면에 최신글보기3개를 수평으로 넣는방법 부탁드립니다.

안녕하세요.

interface 테마를 사용하여 메인화면에 최신글 보기를 정말 어렵게 설치했습니다.

하나의 게시판을  알림판의 [외모]-[위젯] 에서 텍스트 위젯에 숏코드를 넣어서 구현했습니다.

그런데 

수평에 하나만 설치하다보니 게시판의 가로 길이가 너무 길어 보기에 좋지가 않습니다.

최신글 보기를 메인화면에 수평으로 2개 또는 3개를 넣으려면 어떻게 해야 하나요.

메인화면를 원하는대로 구현하기가 너무 힘드네요. 

도움 부탁드립니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • CSS 관련된 내용입니다.

    음 아마도 테마에 컬럼 또는 레이아웃 생성에 관련된 내용이 있을 것이라 생각됩니다.

    한 줄에 2개 3개 6개 등 몇 개의 콘텐츠가 배열되도록 하는 코드가 있을 듯하거든요.

    혹시 테마 매뉴얼은 없는지요?

    그리고 사이트 주소도 알려주시면 CSS 코드 작성에 대해서 좀 더 도와드릴 수 있을 듯합니다.

    CSS 관련된 내용은 직접 페이지를 봐야 하거든요.

    참고고 크롬 브라우저의 개발자도구(F12키)를 사용하시면 CSS를 보다 쉽게 찾고 테스트해보실 수 있습니다.

  • 스렛드봇님 답변주셔서 너무 감사드립니다.

    주변에 워드프레스를 사용하는 사람도 없고 저도 초보자이다 보니 어려움이 많습니다.

    현재 홈페이지는 연습삼아 작성중에 있고 메인화면 구성하는 방법만 터득하면

    바로 홈페이지를 작성할 예정입니다. 

    실제로 운영할 홈페이지는 회원관리를 포함하여 유용한 스킨 몇가지를 사용하여 만들것입니다.

    그런데 가장 어려운 부분이 메인화면이더군요. 나머지는 게시판과 페이지로 구성을 할 수 있겠는데

    메인화면은 레이아웃 개념이 필요한데 이부분이 정말 초보자에게는 너무 어려운 작업입니다.

    지금 완성되어 있는 홈페이지는 워드프레스 책을 따라하면서 만들어 똑같이 구현해 놓은 것입니다.

    interface 테마의 매뉴얼( http://www.themehorse.com/theme-instruction/interface/#customcss )은

    Custom CSS 에대한 설명이 있는데 이곳에 CSS를 넣어보았는데 전체레이아웃이 변경이 되더군요.

    저는 게시판 부분만 수평으로 3개를 넣을 것을 생각했는데 결과는 메인페이지 전체가 영향을 미치는

    일이 되다보니 엄두가 나질 않습니다. 여기저기 연결된 부분이 많아 감을 잡기가 너무 힘드네요.

    메인 화면 레이아웃을 쉽게 할 수 있는 방법 조언 부탁드립니다.

    감사합니다.

  • 테마의 style.css 파일을 확인해보니

    한줄에 3개를 넣을 수 있는 레이아웃 속성이 있습니다.

    http://gcbae.dothome.co.kr/wp-content/themes/interface-child/style.css

    .one-third {
        width: 30.36%;
    }

     

    홈페이지 메인에 있는 코드를 수정해봤습니다.

    아래 코드를 메인에 삽입해서 확인 및 테스트 해보시겠어요?

    <div class="column clearfix">
        <div class="one-third">
        <div class="service-item clearfix">
          <div class="service-icon"><img width="100" height="100" src="http://gcbae.dothome.co.kr/wp-content/uploads/2017/02/icon_03.png" class="attachment-icon size-icon wp-post-image" alt=""></div>      <h3 class="service-title">새로운 글 공지</h3>
        </div>
        <!-- .service-item -->
        <article>
          더불어민주당 문재인 전 대표가 영입한 전인범 전 특전사령관이 “백번천번 송구하다. 다시 미국 연수과정으로 돌아가겠다”며 자진 하차 의사를 밝혔다. 전 전 사령관은 10일 자신의 페이스북에 “부족하지만 (문 전 대표에게) 작은 도움이라도 드리고자 했는데 의도치 않게 저의 부족과 불찰로 문 전 대표께 누를 끼치는 것 같아 안타깝고 죄송하다”며 이같이 말했다. 전 전…     </article>
        <a class="more-link" title="새로운 글 공지" href="http://gcbae.dothome.co.kr/?page_id=141">
        Read more    </a> </div>

          <div class="one-third">
        <div class="service-item clearfix">
          <div class="service-icon"><img width="100" height="100" src="http://gcbae.dothome.co.kr/wp-content/uploads/2017/02/icon_02.png" class="attachment-icon size-icon wp-post-image" alt=""></div>      <h3 class="service-title">홍마리오의 중급</h3>
        </div>
        <!-- .service-item -->
        <article>
          ‘홍마리오 워드프레스 중급’책은 여러분들이 직접 홈페이지를 멋지게 단장하기 위한 방 법을 알려주는 책입니다. 복잡한 소스나 개발언어를 몰라도 기본적인 CSS를 공부해서 수정이 가능한 것입니다. 가령, 최근에 내집 인테리어를 DIY로 자신이 직접하는 것이나 자동차 튜닝을 직접하는 것이랑 같은거라 보면 됩니다. 배우들이 무대에 나가기 전에 화장을 하듯이 홈페이지 단장의 마무리 단계라 볼 수…     </article>
        <a class="more-link" title="홍마리오의 중급" href="http://gcbae.dothome.co.kr/?page_id=71">
        Read more    </a> </div>

          <div class="one-third">
        <div class="service-item clearfix">
          <div class="service-icon"><img width="100" height="100" src="http://gcbae.dothome.co.kr/wp-content/uploads/2017/02/icon_03.png" class="attachment-icon size-icon wp-post-image" alt=""></div>      <h3 class="service-title">홍마리오의 쇼핑몰</h3>
        </div>
        <!-- .service-item -->
        <article>
          홍마리오의 워드프레스 쇼핑몰책은 워드프레스와 우커머스를 이용해서 쇼핑몰 제작을 쉽게할 수 있도록 도움을 주는 책입니다.&nbsp; 워드프레스로 쇼핑몰을 제작하면 다음과 같 은 장점이 있습니다. 첫 번째, 모바일에서 접근성입니다. 누구나 쉽게 모바일에서 상품을 보면서 결제가 가 능하기 때문입니다. 두 번째는 업체에 홈페이지를 맡기지 않고 직접 유지관리 가능합니다. 또한 해외판매 동시 진행시 유리합니다. 이론과…     </article>
        <a class="more-link" title="홍마리오의 쇼핑몰" href="http://gcbae.dothome.co.kr/?page_id=74">
        Read more    </a> </div>
    </div>

  • 너무너무 감사드립니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기