가입과 유사한 OTA 웹 사이트를 만듭니다.meta Box가 있는 com - P1: 호텔 객실 소개 페이지 만들기

9094 단어 wordpress
현재 온라인 여행사(OTA) 사이트는 회사와 여행사의 환영을 받고 있으며, 특히 hotel booking 서비스를 제공하는 회사와 여행사의 인기가 높다.이 분야에서 가장 인기 있는 사이트는 아고다다.com 및 예약.com과 전문적인 호텔 예약 시스템.만약 그들과 같은 온라인 여행사 사이트를 구축하고 싶다면, 우리의 시리즈 기사인'booking.com과agoda.com 같은 온라인 여행사 사이트를 만들자'에 주목하십시오.
본 시리즈의 첫 번째 글에서 우리는 모든 호텔에 페이지를 만들고 사용자 정의 필드를 만들어서 호텔 정보를 입력한 다음에 사이트에 표시할 것이다.
이렇게 하려면 다음 플러그인을 설치해야 합니다.
  • Meta Box 플러그인: 이 플러그인은 custom fields 프레임워크를 만드는 데 도움을 줍니다.이 무료 플러그인을 wordpress.org 에서 다운로드할 수 있습니다.
  • Meta Box Builder: Meta-Box 플러그인의 고급 확장자입니다.이것은 백엔드에서 직관적인 사용자 인터페이스(UI)를 가진 사용자 정의 필드를 만드는 데 도움을 줍니다.
  • MB Custom Post Type: Meta Box의 무료 확장으로 게시물 유형을 쉽게 만들 수 있습니다.또는 플러그인을 설치하고 싶지 않으면 무료 도구Post Type Generator를 사용할 수 있습니다.
  • Meta Box Group: 사용자 정의 필드를 그룹화하기 위해 필드 그룹을 만드는 데 사용되는 Meta-Box 플러그인의 고급 확장자입니다.이것은 조직이 좋은 방식으로 사용자 정의 필드를 표시하고 입력 데이터를 더욱 편리하게 하는 데 도움이 된다.
  • 위의 모든 플러그인을 설치하고 활성화하려면 다음 절차를 따르십시오.

    1단계: 호텔 페이지의 새로운 게시물 유형 만들기


    MB 사용자 정의 게시물 유형을 사용하면 쉽게 완료할 수 있습니다.먼저 관리 대시보드에서 Meta Box > Custom Post Type으로 이동하여 New Post Type을 클릭합니다.

    그런 다음 게시물 유형에 대한 필수 정보를 입력하고 게시를 클릭합니다.사용자 정의 게시물 유형을 만드는 방법에 대한 자세한 정보here를 얻을 수 있습니다.

    2단계: 호텔 게시물 유형에 대한 사용자 정의 필드 만들기


    이 단계에서 새로 만든 호텔post 형식에 사용자 정의 필드를 추가하려면 Meta Box Builder 확장이 필요합니다.분명히 당신은 자금을 절약하기 위해 수동으로 인코딩할 수 있습니다.단, 인코딩 시간을 절약하고 싶거나, 인코더가 아니라면, 사용자 인터페이스를 사용하여 사용자 정의 필드와 무료 Online Generator 도구의 상자를 만들 수 있습니다.이 코드를 사용하여 코드를 생성한 다음 functions.php 파일에 추가합니다.
    본문에서 나는 원통 생성기를 사용할 것이다.먼저 Meta Box>Custom Fields>Add New 로 이동합니다.

    다음은 왼쪽 열에 필요한 필드를 오른쪽의 필드 부분으로 드래그하기만 하면 됩니다.다음은 호텔 소개 페이지를 위한 사용자 정의 필드와 하위 필드입니다.

    구체적으로 각 필드에 해당하는 다음 필드 유형을 선택했습니다.
    Field labelField Type 호텔 이미지 고급 주소 Text Area MapOpen Street Map 숙박 유형 체크 상자 목록 시설 체크 상자 목록 도시 중심 TextRoomGroupRoom 이름 TextRoom 이미지 고급 방 구역 TextNumber of AdultsNumber of ChildrenNumber Room PriceNumber Room 시설 체크 상자 목록 서명 날짜 우리의 마지막 방 번호
    참고 각 필드에 레이블과 ID를 입력하고 기억해야 합니다.다음 단계에서 우리는 이 ID들을 코드에 삽입할 것이다.

    또한 다음과 같은 특수 영역에 유의하십시오.
    확인란 목록 필드: 확인란에 다음 구문을 사용하여 한 줄에 각 옵션을 입력합니다.ID-of-choice: 옵션 이름

    주소 필드: 백엔드에 호텔 주소를 입력하는 데 사용됩니다.

    지도 필드: 위의 주소 필드의 필드 ID로 주소 필드 상자를 작성하여 앞의 지도에 호텔 위치를 표시합니다.

    방 그룹 필드는 호텔 방의 모든 정보를 포함하는 그룹이다. 예를 들어 방 이름, 방 이미지, 방 면적, 성인 수, 어린이 수, 방 가격, 방 시설, 입주 날짜 등이다.이 필드를 방 필드로 드래그하면 방 필드의 하위 필드가 됩니다.

    필드를 작성한 후 설정 탭으로 이동하여 게시물 유형을 호텔로 선택합니다.

    3단계: 호텔별 정보 입력


    1단계에서 게시물 유형을 작성하면 호텔이라는 새 메뉴가 관리 대시보드에 표시됩니다.이 메뉴로 이동하여 호텔을 추가하거나 필요한 호텔 정보를 입력하십시오.

    2단계에서 작성한 사용자 정의 필드는 호텔마다 표시됩니다.이제 다음 필드의 정보만 입력하십시오.

    참고 백엔드의 관리자 계정에서 정보를 입력하는 단계입니다.일반적으로 온라인 여행사 사이트에는 호텔 소유자가 호텔 정보를 전면에 추가하거나 편집할 수 있는 페이지가 있다.이를 위해서는 다음 단계에서 this article 를 따를 수 있습니다.이후 호텔 소유자는 전방에 계정을 만들고 로그인하며 사용 가능한 형식으로 호텔 정보를 제출할 수 있다.

    4단계: 호텔 정보 전면에 표시


    이 단계에서 저는 Justread 테마를 사용했습니다.테마와 상관없이 편집하기 위해 child theme 을 만들 것입니다. (무료 Justread 테마 here 를 다운로드해서 시도해 보십시오.
    우선, single-hotel.php라는 파일을 만들고, 다음 내용으로 single.php 파일을 덮어씁니다.
    /**\
  • 모든 호텔의 템플릿을 표시합니다\
    *\

  • https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post\
    *\

  • Justread 회사\
    */
  • get_header();?>\
    \
    \

    <div id="primary" class="content-area">
    
    <div id="primary" class="content-area">
    
        <main id="main" class="site-main">\
        <?php\
        while ( have_posts() ) : the_post();\
            get_template_part( 'template-parts/content', 'single-hotel' );
    
            // 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 -->\
    
    get_footer();
    설명:
  • <?php dynamic_sidebar( 'sidebar-single-hotel' ); ?>: 이 코드는 한 호텔 페이지에 단독 사이드바를 만들고 OTA 사이트의 왼쪽으로 이동하는 데 사용됩니다.
  • get_template_part( 'template-parts/content', 'single-hotel' ): 이 코드는 content-single-hotel.php 파일이 아니라 content.php 파일을 사용하여 호텔 페이지의 내용을 변경합니다.
  • 이 밖에 content-single-hotel.php 파일 here 의 내용을 찾을 수 있습니다.
    다음은 CSS를 사용하여 표시 필드의 스타일을 설정하여 더욱 아름답게 해야 합니다.내 style.css 파일에서 단일 호텔 페이지 스타일을 설정하는 데 사용되는 내용은 here 이다.
    다음은 저희 사이트의 단일 호텔 페이지에 표시된 호텔 정보입니다.

    다 끝났어!우리는 이미 모든 호텔 페이지에 호텔 정보를 표시하는 작업을 끝냈다.

    마지막 말


    다음 글은 호텔 파일 페이지와 호텔 페이지에서 예약할 방을 검색하는 필터를 만들 것입니다.그러니 우리를 따라오는 것을 잊지 마라!질문이나 생각이 있으시면 언제든지 논평 부분에서 저희와 공유해 주십시오.
     --- --- --- 
    출판물은 Meta Box에 있습니다.

    좋은 웹페이지 즐겨찾기