Comment créer un plugin sur wordpress pour réaliser un todolist

  • WordPress :5.2
  • Statut : non résolu
2 sujets de 1 à 2 (sur un total de 2)
  • Auteur
    Messages
  • #2280704
    deejayherzo
    Participant
    Initié WordPress
    4 contributions

    Bonjour,

    Je voudrais savoir comment créer un plugin sur wordpress pour réaliser un todolist?

    Je suis nouveau sur Word Press et j’aimerais créer une liste de ce style sur WordPress ->

    https://codepen.io/franklynroth/pen/ZYeaBd

    Mais c’est du javascript et je voudrais en créer un sur wordpress.

    Quelqu’un aurait une idée de comment le faire?

    `<span class="com">//Document is the DOM can be accessed in the console with document.window.</span>
    <span class="com">// Tree is from the top, html, body, p etc.</span></pre>
    <span class="com">//Problem: User interaction does not provide the correct results.</span>
    <span class="com">//Solution: Add interactivity so the user can manage daily tasks.</span>
    <span class="com">//Break things down into smaller steps and take each step at a time.</span>
    
    <span class="com">//Event handling, uder interaction is what starts the code execution.</span>
    
    <span class="kwd">var</span><span class="pln"> taskInput</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"new-task"</span><span class="pun">);</span><span class="com">//Add a new task.</span>
    <span class="kwd">var</span><span class="pln"> addButton</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">"button"</span><span class="pun">)[</span><span class="lit">0</span><span class="pun">];</span><span class="com">//first button</span>
    <span class="kwd">var</span><span class="pln"> incompleteTaskHolder</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"incomplete-tasks"</span><span class="pun">);</span><span class="com">//ul of #incomplete-tasks</span>
    <span class="kwd">var</span><span class="pln"> completedTasksHolder</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"completed-tasks"</span><span class="pun">);</span><span class="com">//completed-tasks</span>
    
    <span class="com">//New task list item</span>
    <span class="kwd">var</span><span class="pln"> createNewTaskElement</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">taskString</span><span class="pun">){</span>
    
    <span class="kwd">var</span><span class="pln"> listItem</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">"li"</span><span class="pun">);</span>
    
    <span class="com">//input (checkbox)</span>
    <span class="kwd">var</span><span class="pln"> checkBox</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">"input"</span><span class="pun">);</span><span class="com">//checkbox</span>
    <span class="com">//label</span>
    <span class="kwd">var</span><span class="pln"> label</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">"label"</span><span class="pun">);</span><span class="com">//label</span>
    <span class="com">//input (text)</span>
    <span class="kwd">var</span><span class="pln"> editInput</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">"input"</span><span class="pun">);</span><span class="com">//text</span>
    <span class="com">//button.edit</span>
    <span class="kwd">var</span><span class="pln"> editButton</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">"button"</span><span class="pun">);</span><span class="com">//edit button</span>
    
    <span class="com">//button.delete</span>
    <span class="kwd">var</span><span class="pln"> deleteButton</span><span class="pun">=</span><span class="pln">document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">"button"</span><span class="pun">);</span><span class="com">//delete button</span>
    
    label<span class="pun">.</span><span class="pln">innerText</span><span class="pun">=</span><span class="pln">taskString</span><span class="pun">;</span>
    
    <span class="com">//Each elements, needs appending</span><span class="pln">
    checkBox</span><span class="pun">.</span><span class="pln">type</span><span class="pun">=</span><span class="str">"checkbox"</span><span class="pun">;</span><span class="pln">
    editInput</span><span class="pun">.</span><span class="pln">type</span><span class="pun">=</span><span class="str">"text"</span><span class="pun">;</span>
    
    editButton<span class="pun">.</span><span class="pln">innerText</span><span class="pun">=</span><span class="str">"Edit"</span><span class="pun">;</span><span class="com">//innerText encodes special characters, HTML does not.</span><span class="pln">
    editButton</span><span class="pun">.</span><span class="pln">className</span><span class="pun">=</span><span class="str">"edit"</span><span class="pun">;</span><span class="pln">
    deleteButton</span><span class="pun">.</span><span class="pln">innerText</span><span class="pun">=</span><span class="str">"Delete"</span><span class="pun">;</span><span class="pln">
    deleteButton</span><span class="pun">.</span><span class="pln">className</span><span class="pun">=</span><span class="str">"delete"</span><span class="pun">;</span>
    
    <span class="com">//and appending.</span><span class="pln">
    listItem</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">checkBox</span><span class="pun">);</span><span class="pln">
    listItem</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">label</span><span class="pun">);</span><span class="pln">
    listItem</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">editInput</span><span class="pun">);</span><span class="pln">
    listItem</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">editButton</span><span class="pun">);</span><span class="pln">
    listItem</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">deleteButton</span><span class="pun">);</span>
    <span class="kwd">return</span><span class="pln"> listItem</span><span class="pun">;</span>
    <span class="pun">}</span>
    
    <span class="kwd">var</span><span class="pln"> addTask</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"Add Task..."</span><span class="pun">);</span>
    <span class="com">//Create a new list item with the text from the #new-task:</span>
    <span class="kwd">var</span><span class="pln"> listItem</span><span class="pun">=</span><span class="pln">createNewTaskElement</span><span class="pun">(</span><span class="pln">taskInput</span><span class="pun">.</span><span class="pln">value</span><span class="pun">);</span>
    
    <span class="com">//Append listItem to incompleteTaskHolder</span><span class="pln">
    incompleteTaskHolder</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">listItem</span><span class="pun">);</span><span class="pln">
    bindTaskEvents</span><span class="pun">(</span><span class="pln">listItem</span><span class="pun">,</span><span class="pln"> taskCompleted</span><span class="pun">);</span>
    
    taskInput<span class="pun">.</span><span class="pln">value</span><span class="pun">=</span><span class="str">""</span><span class="pun">;</span>
    
    <span class="pun">}</span>
    
    <span class="com">//Edit an existing task.</span>
    
    <span class="kwd">var</span><span class="pln"> editTask</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"Edit Task..."</span><span class="pun">);</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"Change 'edit' to 'save'"</span><span class="pun">);</span>
    
    <span class="kwd">var</span><span class="pln"> listItem</span><span class="pun">=</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">parentNode</span><span class="pun">;</span>
    
    <span class="kwd">var</span><span class="pln"> editInput</span><span class="pun">=</span><span class="pln">listItem</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">'input[type=text]'</span><span class="pun">);</span>
    <span class="kwd">var</span><span class="pln"> label</span><span class="pun">=</span><span class="pln">listItem</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">"label"</span><span class="pun">);</span>
    <span class="kwd">var</span><span class="pln"> containsClass</span><span class="pun">=</span><span class="pln">listItem</span><span class="pun">.</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">contains</span><span class="pun">(</span><span class="str">"editMode"</span><span class="pun">);</span>
    <span class="com">//If class of the parent is .editmode</span>
    <span class="kwd">if</span><span class="pun">(</span><span class="pln">containsClass</span><span class="pun">){</span>
    
    <span class="com">//switch to .editmode</span>
    <span class="com">//label becomes the inputs value.</span><span class="pln">
    label</span><span class="pun">.</span><span class="pln">innerText</span><span class="pun">=</span><span class="pln">editInput</span><span class="pun">.</span><span class="pln">value</span><span class="pun">;</span>
    <span class="pun">}</span><span class="kwd">else</span><span class="pun">{</span><span class="pln">
    editInput</span><span class="pun">.</span><span class="pln">value</span><span class="pun">=</span><span class="pln">label</span><span class="pun">.</span><span class="pln">innerText</span><span class="pun">;</span>
    <span class="pun">}</span>
    
    <span class="com">//toggle .editmode on the parent.</span><span class="pln">
    listItem</span><span class="pun">.</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">toggle</span><span class="pun">(</span><span class="str">"editMode"</span><span class="pun">);</span>
    <span class="pun">}</span>
    
    <span class="com">//Delete task.</span>
    <span class="kwd">var</span><span class="pln"> deleteTask</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"Delete Task..."</span><span class="pun">);</span>
    
    <span class="kwd">var</span><span class="pln"> listItem</span><span class="pun">=</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">parentNode</span><span class="pun">;</span>
    <span class="kwd">var</span><span class="pln"> ul</span><span class="pun">=</span><span class="pln">listItem</span><span class="pun">.</span><span class="pln">parentNode</span><span class="pun">;</span>
    <span class="com">//Remove the parent list item from the ul.</span><span class="pln">
    ul</span><span class="pun">.</span><span class="pln">removeChild</span><span class="pun">(</span><span class="pln">listItem</span><span class="pun">);</span>
    
    <span class="pun">}</span>
    
    <span class="com">//Mark task completed</span>
    <span class="kwd">var</span><span class="pln"> taskCompleted</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"Complete Task..."</span><span class="pun">);</span>
    
    <span class="com">//Append the task list item to the #completed-tasks</span>
    <span class="kwd">var</span><span class="pln"> listItem</span><span class="pun">=</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">parentNode</span><span class="pun">;</span><span class="pln">
    completedTasksHolder</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">listItem</span><span class="pun">);</span><span class="pln">
    bindTaskEvents</span><span class="pun">(</span><span class="pln">listItem</span><span class="pun">,</span><span class="pln"> taskIncomplete</span><span class="pun">);</span>
    
    <span class="pun">}</span>
    
    <span class="kwd">var</span><span class="pln"> taskIncomplete</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"Incomplete Task..."</span><span class="pun">);</span>
    <span class="com">//Mark task as incomplete.</span>
    <span class="com">//When the checkbox is unchecked</span>
    <span class="com">//Append the task list item to the #incomplete-tasks.</span>
    <span class="kwd">var</span><span class="pln"> listItem</span><span class="pun">=</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">parentNode</span><span class="pun">;</span><span class="pln">
    incompleteTaskHolder</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">listItem</span><span class="pun">);</span><span class="pln">
    bindTaskEvents</span><span class="pun">(</span><span class="pln">listItem</span><span class="pun">,</span><span class="pln">taskCompleted</span><span class="pun">);</span>
    <span class="pun">}</span>
    
    <span class="kwd">var</span><span class="pln"> ajaxRequest</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"AJAX Request"</span><span class="pun">);</span>
    <span class="pun">}</span>
    
    <span class="com">//The glue to hold it all together.</span>
    
    <span class="com">//Set the click handler to the addTask function.</span><span class="pln">
    addButton</span><span class="pun">.</span><span class="pln">onclick</span><span class="pun">=</span><span class="pln">addTask</span><span class="pun">;</span><span class="pln">
    addButton</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"click"</span><span class="pun">,</span><span class="pln">addTask</span><span class="pun">);</span><span class="pln">
    addButton</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"click"</span><span class="pun">,</span><span class="pln">ajaxRequest</span><span class="pun">);</span>
    
    <span class="kwd">var</span><span class="pln"> bindTaskEvents</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">taskListItem</span><span class="pun">,</span><span class="pln">checkBoxEventHandler</span><span class="pun">){</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"bind list item events"</span><span class="pun">);</span>
    <span class="com">//select ListItems children</span>
    <span class="kwd">var</span><span class="pln"> checkBox</span><span class="pun">=</span><span class="pln">taskListItem</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">"input[type=checkbox]"</span><span class="pun">);</span>
    <span class="kwd">var</span><span class="pln"> editButton</span><span class="pun">=</span><span class="pln">taskListItem</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">"button.edit"</span><span class="pun">);</span>
    <span class="kwd">var</span><span class="pln"> deleteButton</span><span class="pun">=</span><span class="pln">taskListItem</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">"button.delete"</span><span class="pun">);</span>
    
    <span class="com">//Bind editTask to edit button.</span><span class="pln">
    editButton</span><span class="pun">.</span><span class="pln">onclick</span><span class="pun">=</span><span class="pln">editTask</span><span class="pun">;</span>
    <span class="com">//Bind deleteTask to delete button.</span><span class="pln">
    deleteButton</span><span class="pun">.</span><span class="pln">onclick</span><span class="pun">=</span><span class="pln">deleteTask</span><span class="pun">;</span>
    <span class="com">//Bind taskCompleted to checkBoxEventHandler.</span><span class="pln">
    checkBox</span><span class="pun">.</span><span class="pln">onchange</span><span class="pun">=</span><span class="pln">checkBoxEventHandler</span><span class="pun">;</span>
    <span class="pun">}</span>
    
    <span class="com">//cycle over incompleteTaskHolder ul list items</span>
    <span class="com">//for each list item</span>
    <span class="kwd">for</span> <span class="pun">(</span><span class="kwd">var</span><span class="pln"> i</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i</span><span class="pun"><</span><span class="pln">incompleteTaskHolder</span><span class="pun">.</span><span class="pln">children</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln">i</span><span class="pun">++){</span>
    
    <span class="com">//bind events to list items chldren(tasksCompleted)</span><span class="pln">
    bindTaskEvents</span><span class="pun">(</span><span class="pln">incompleteTaskHolder</span><span class="pun">.</span><span class="pln">children</span><span class="pun">[</span><span class="pln">i</span><span class="pun">],</span><span class="pln">taskCompleted</span><span class="pun">);</span>
    <span class="pun">}</span>
    
    <span class="com">//cycle over completedTasksHolder ul list items</span>
    <span class="kwd">for</span> <span class="pun">(</span><span class="kwd">var</span><span class="pln"> i</span><span class="pun">=</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i</span><span class="pun"><</span><span class="pln">completedTasksHolder</span><span class="pun">.</span><span class="pln">children</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln">i</span><span class="pun">++){</span>
    <span class="com">//bind events to list items chldren(tasksIncompleted)</span><span class="pln">
    bindTaskEvents</span><span class="pun">(</span><span class="pln">completedTasksHolder</span><span class="pun">.</span><span class="pln">children</span><span class="pun">[</span><span class="pln">i</span><span class="pun">],</span><span class="pln">taskIncomplete</span><span class="pun">);</span>
    <span class="pun">}</span>
    
    <span class="com">// Issues with usabiliy don't get seen until they are in front of a human tester.</span>
    
    <span class="com">//prevent creation of empty tasks.</span>
    
    <span class="com">//Shange edit to save when you are in edit mode.</span>`
    
    #2280710
    Li-An
    Modérateur
    Maître WordPress
    22520 contributions

    Bonjour, il faudrait préciser à quel usage ce Todo (usage perso pour l’admin, pour les membres, les visiteurs ?).

2 sujets de 1 à 2 (sur un total de 2)
  • Vous devez être connecté pour répondre à ce sujet.