Haroop Webagency team BICTOR

원격 및 파견 개발팀분들을 위한 하룹소속 개발자전용 빅터 오픈소스 커뮤니티입니다

이곳은 하룹 개발팀 소속 직원들에 전체 개발기술력 및 전체 평균 능력치 강화를 위한, 빅터팀 리드개발자들에 오픈소스 개발 커뮤니티 공간입니다, 만약 고객이시라면 여기를 이용해주세요.

제목
워드프레스 엘리멘토 관련 비밀노하우 문의 드립니다
작성자
제이크
작성일
2022-08-15 09:45
조회
54
답변완료
이번 수정하는 성형외과 홈페이지가 워드프레스 엘리멘토를 이용해서 개발되어졌는데
하룹넷에 워드프레스 엘리멘토 관련 비밀노하우를 읽어봤는데, 이렇게까지해서 엘리멘토같은걸 꼭 이용해야하는건가 싶기도 하더라구요ㅠ
그냥 바로 html css 짜버리고, 미디어쿼리로 태블릿 모바일 잡아주는게.... 더 빠르고 편한데... 개발자 입장에서는 진짜 워드프레스는 너무 어려운거같습니다ㅠ
그래도 일단 처리는 해야하기에ㅠㅠ 엘리멘토로 소셜로그인 위젯을 설정해봤는데, 구글 인스타등은 되지만, 네이버나 카카오는 위젯으로 해결이 안되서ㅠㅠ
어떻게 처리해야하나 하다가, function으로 처리하면 위젯으로 추가가 될거같아서 짜보는데 너무 어렵네요...ㅠ
그냥 php파일로 만들고 붙히면 뚝딱일텐데... 혹시 이럴땐 어떻게 해야하나요?ㅠ
최대한 xyz-php를 만들어 숏코드로 붙히는거는 일단 최대한 피하고 싶고, 엘리멘토 자체에 네이버 및 카카오로그인 위젯등을
추가하고 싶습니다. 물론 그게 현실적으로 어렵다면, xyz에 네이버 및 카카오 소셜로그인 방식을 플러그인으로 짜고, 붙혀넣을수밖에 없을거같아요..ㅠ
전체 4

  • 2022-08-15 14:09

    안녕하세요 제이크님, 워드프레스 플러그인 추가개발 같은 경우는, 내부에 소스를 짜봤자 업데이트가 되면 소스가 없어지기에 추천드리진 않습니다.
    그렇기에 추가개발을 하시려면, 각 플러그인들마다 추가개발하는 방식이 다른데, 엘리멘토 같은 경우 애드온을 개발하시면 매우 쉽습니다.
    애드온같은경우 소스를 짜서, 플러그인 폴더에 집어넣으시면 됩니다. (엘리멘토 폴더에 넣으시면 안됩니다. 그냥 wp-content/plugins 이곳에 넣으셔야 합니다)

    우선 폴더를 하나 만드신후 위젯에 아래와 같이 소스를 짜서 넣어주세요

    <?php
    /**
    * Plugin Name: Elementor Addon by Haroop
    * Description: Simple Haroop bictor team widgets for Elementor.
    * Version: 1.0.0
    * Author: Haroop Developer
    * Author URI: https://haroop.com/
    */

    function register_haroop_bictor_widget( $widgets_manager ) {

    require_once( __DIR__ . '/widgets/haroop-bictor-1.php' );
    require_once( __DIR__ . '/widgets/haroop-bictor-2.php' );

    $widgets_manager->register( new \Elementor_Haroop_Bictor_1() );
    $widgets_manager->register( new \Elementor_Haroop_Bictor_2() );

    }
    add_action( 'elementor/widgets/register', 'register_haroop_bictor_widget' );


  • 2022-08-15 14:16

    이후 첫번째 위젯을 만드시면 됩니다. 우선 Haroop Bictor 라는 텍스트를 출력해보는 예제를 짜보자면, 아래와 같이 짤 수 있습니다.

    <?php
    class register_haroop_bictor_widget_1 extends \Elementor\Widget_Base {

    public function get_name() {
    return 'haroop_bictor_widget_1';
    }

    public function get_title() {
    return esc_html__( 'Haroop Bictor 1', 'elementor-addon-by-haroop' );
    }

    public function get_icon() {
    return 'eicon-code';
    }

    public function get_categories() {
    return [ 'basic' ];
    }

    public function get_keywords() {
    return [ 'haroop', 'bictor' ];
    }

    protected function render() {
    ?>

    Haroop Bictor

    <?php
    }
    }


  • 2022-08-15 14:21

    두번째 위젯에 경우. 위젯 패널에 두개의 컨트롤이 생성하여, 텍스트입력 및 색상 실시간 수정을 할 수 있도록 만들고 싶으시다면

    <?php
    class Elementor_Haroop_Bictor_2 extends \Elementor\Widget_Base {

    public function get_name() {
    return 'haroop_bictor_2';
    }

    public function get_title() {
    return esc_html__( 'Haroop Bictor 2', 'elementor-addon-by-haroop' );
    }

    public function get_icon() {
    return 'eicon-code';
    }

    public function get_categories() {
    return [ 'basic' ];
    }

    public function get_keywords() {
    return [ 'haroop', 'bictor' ];
    }

    protected function register_controls() {

    // Content Tab Start

    $this->start_controls_section(
    'section_title',
    [
    'label' => esc_html__( 'Title', 'elementor-addon-by-haroop' ),
    'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
    ]
    );

    $this->add_control(
    'title',
    [
    'label' => esc_html__( 'Title', 'elementor-addon-by-haroop' ),
    'type' => \Elementor\Controls_Manager::TEXTAREA,
    'default' => esc_html__( 'Haroop Bictor', 'elementor-addon-by-haroop' ),
    ]
    );

    $this->end_controls_section();

    // 엘리멘토 컨텐츠 탭 종료

    // 엘리멘토 스타일 탭 시작

    $this->start_controls_section(
    'section_title_style',
    [
    'label' => esc_html__( 'Title', 'elementor-addon-by-haroop' ),
    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
    ]
    );

    $this->add_control(
    'title_color',
    [
    'label' => esc_html__( 'Text Color', 'elementor-addon-by-haroop'),
    'type' => \Elementor\Controls_Manager::COLOR,
    'selectors' => [
    '{{WRAPPER}} .haroo-bictor' => 'color: {{VALUE}};',
    ],
    ]
    );

    $this->end_controls_section();

    // 엘리멘토 스타일 탭 종료

    }

    protected function render() {
    $settings = $this->get_settings_for_display();
    ?>

    <?php echo $settings['title']; ?>

    <?php
    }
    }


  • 2022-08-15 14:29

    엘리멘토 내에서 직접 추가하시려면, 위와 같이 별도의 애드온을 개발하신후 내부에 원하시는 코드를 짜서 만들어주시면 됩니다.
    위 애드온으로 테스트를 해보신후 엘리멘토에서 반응하는 방식과 원리를 이해하시면, 소셜로그인 탑재 및 모양새 변경도 실시간으로 변경처리가 될 수 있게끔
    자유자재로 만드실 수 있으실것입니다. (물론 워드프레스 추가개발에 경우는 난이도가 높은 편이라 일반적인 개발보다 시간이 좀 걸리긴 하지만...^^;; 조금만 참으시면서 개발하시다보면, 워드프레스 특성상 만들어만 놓으면, 다양한 활용이 가능해지기에, 그 인내의 시간에 대한 뿌듯함을 충분히 만끽하실수있으실 겁니다.)

    참고로 위에 코드는 그저 haroop-bictor 출력시키는 예제일뿐이므로, 현재 하시려고 하는 부분을 짜보시면, 엄청나게 코드가 길어지게 되므로...
    그부분에 대해서는 놀라지마시고, 계속 하나하나씩 짜보시길 바라겠습니다. 워드프레스에 클래스,펑션,객체지향,훅,필터등에 구성 출력 특성상 추가개발 난이도가 일반적으로 짜여진 웹구성보다 좀 많이 높은편이라 몇번을 해보셔도 살짝 어렵긴 하실것이나 실제로 완성해보시면 뿌듯함은 분명 크기에, 보람 있는 경험이 되실듯 합니다^^

    이외 문의 있으시면 언제든 말씀해주시면, 저희 본사팀에는 워드프레스쪽에도 자체테마개발 및 자체플러그인 개발 납품이 가능한 고인력들이 대거 배치되어있으므로, 언제든 말씀해주시면 스스로 완성해나가실 수 있도록, 적극적으로 도움드릴 수 있도록 하겠습니다 🙂